Question

I have a html like below wherein there are multiple forms. I generate this using JSTL, so the number could vary depending on what is enrolled in my DB. Each form has its own submit button.

Basically, I wanted to use the Form Plugins ajax submit button, but I don’t know how to reference the form.

<form id="form-1" action="approve.htm">
    <textarea name="comment"> </textarea>
    <input type="submit" value="Add Comment" />
</form>
<form id="form-2" action="approve.htm">
    <textarea name="comment"> </textarea>
    <input type="submit" value="Add Comment" />
</form>
.
.
.
<form id="form-10" action="approve.htm">
    <textarea name="comment"> </textarea>
    <input type="submit" value="Add Comment" />
</form>

My problem is how do I know which form id is getting submitted by using jQuery.

I don’t know which form-name will I place in the call to the ajax form.

$('#form-name?').ajaxForm();

Answer 1

By default it’ll submit the current form, e.g. the one you clicked “Add Comment” in, so just select them by tag name:

$('form').ajaxForm();

Alternatively (especially if there are other forms on the page), give them a class, for example:

<form id="form-1" class="commentForm" action="approve.htm">

And select by class:

$('form.commentForm').ajaxForm();

It’s important to keep in mind that .ajaxForm() doesn’t send the <form> it prepares it. You’re just selecting some forms and preparing them…they all still submit individually. So all you need to do here is use a selector that selects only the forms you want to prepare to submit through AJAX.