title: how can you have the same form handle by javascript multiple times on the same page?
body: <p>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.</p>
  
  <p>javascript in header</p>
  
  <p>just a quick idea of the forms i have. Just a quick idea not what I actually have.</p>
  
  <p>image1 followed by the form</p>
  
  
  
  
  
  
  <p>image2 followed by the form</p>
  
  
  
  
  
  
  <p>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.</p>
  
  <p>$(function() {<br>
      $(".submit").click(function() {<br>
  var imgId = $("#imgId").val();<br>
          var dataString = 'imgId='+ imgId;<br>
          if(imgId==''){<br>
              $('.success').fadeOut(200).hide();<br>
              $('.error').fadeIn(200).show();<br>
              $('.error').fadeOut(200).hide();<br>
          }else{<br>
              $.ajax({<br>
                  type: "POST",<br>
                  url: "inc/brokenImgReport.php",<br>
                  data: dataString,<br>
                  success: function(){<br>
          });  </p>
  
  <pre><code>    $('.error').fadeOut(200).hide();  
      $('.success').fadeIn(200).show();  
      setTimeout(function() {  
          $('.success').fadeOut(200); }, 2000);  
      }  
      return false;  
  });  
  </code></pre>
  
  <p>});  </p>