Question

I have the following dynamically generated HTML

<div id="1">
<form name = "inpForm">
<input name="FirstName" type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>

<div id="2">
<form name = "inpForm">
<input name="FirstName" type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>

The outer divs have different IDs but the form names are the same. I am using Jquery to perform some validation when the form is submitted. However, when the second form is submitted, I always get the values of the first form.

$(document).ready(function () {
    $('form[name="inpForm"]').live('submit', function () {
        alert($('input[name="FirstName"]').val());
        return false;
    });
});

How can I modify myJquery to find the “FirstName” element that matches the current form where the submit was triggered?
Thanks

Answer 1

Add some context:

alert($(this).find('input[name="FirstName"]').val());