如何在同一页面上通过javascript多次使用相同的表单句柄？

Question

I have a thumb gallery where I am using ajax/javascript to submit a form per image to report the image as broken seamlessly along with php. The form and script is templated so the script is in the header and then the form is printed multiple times on the same page with a hidden field with a different id for the value per thumb. So basically this is what i have.

javascript in header

just a quick idea of the forms i have. Just a quick idea not what I actually have.

image1 followed by the form

image2 followed by the form

So when you hit the button it basically submits all of the forms at the same time. I am sure it can be fixed with a (this) or something like that so it only submits a single form at a time. Let me know please.

$(function() {
$(".submit").click(function() {
var imgId = $("#imgId").val();
var dataString = 'imgId='+ imgId;
if(imgId==''){
$('.success').fadeOut(200).hide();
$('.error').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}else{
$.ajax({
type: "POST",
url: "inc/brokenImgReport.php",
data: dataString,
success: function(){
});

    $('.error').fadeOut(200).hide();  
    $('.success').fadeIn(200).show();  
    setTimeout(function() {  
        $('.success').fadeOut(200); }, 2000);  
    }  
    return false;  
});  

});

Answer 1

in a page with multiple forms. You can refer individual form as an array element forms[0],forms[1] and likewise, on click of submit button. you can do

forms[0].submit

forms[1].submit

and likewise

Answer 2

$(document).ready( function(){
    $('form.your_class_if_needed').submit( function(){
        do_your_stuff_here()
    })
})

Every form with class your_class_if_needed will have the function you define attached to its submit method. Within that function, $(this) will refer to each specific form -- not all of them. You can then easily select, process, and assemble your form fields and values within the context of each form, and submit them with $.ajax() or $.post() .