Scope of forms using jQuery

Question

I am building several forms dynamically on a page (Kind of like news feeds on facebook where each feed has a text box and submit button).

So for each feed I am building (using Python) the following form:

<form>
<input type="text">
<input type="hidden" id="feednum" value=FEED_NUM>
<input type="button" class="btnSubmit" value="submit">
</form>

I am using jQuery for catching the submit event:

$(".btnSubmit").submit(function () {
... Call Ajax ... });

My question is how can I get the correct scope of the submitted form (that is the attached "feednum" hidden value so I can know which form was really submitted and send this number to Ajax)

Thanks

Joel

Answer 1

You can attach the event to your form:

$(".btnSubmit").closest('form').submit(function () {
    var id = $(this).find('.feednum').val();
    //... Call Ajax ... 
});

Notice you should change ID to class: having multiple elements with the same ID is invalid.

If you want to keep the event bound to the button, you can use:

var id = $(this).closest('form').find('.feednum').val();

Or, less robustly: $(this).prev().val()