title: Targeting multiple forms to send via ajax (jquery)
body: <p>I have multiple forms on my page.  When I click the forms submit button, I want to send the form value of only that form through ajax. Here is what I have.  The first form works as its supposed to, the second form actually submits the form.  How can I target each form individually.  I feel I should be using .find() somewhere.</p>
  
  <pre><code> &lt;form id="form1" method="post"&gt;
      &lt;input type="text" id="name1" name="value" value=""&gt;
      &lt;input type="submit"  id="update_form"  value="Save Changes"&gt;
    &lt;/form&gt;
  
   &lt;form id="form2" method="post"&gt;
      &lt;input type="text" id="name2" name="value" value=""&gt;
      &lt;input type="submit"  id="update_form"  value="Save Changes"&gt;
   &lt;/form&gt;
  
  
  
  &lt;script&gt;
  // this is the id of the submit button
  $("#update_form").click(function() {
  
      $.ajax({
             type: "POST",
             url: "approve_test.php",
             data: $(this.form).serialize(), // serializes the form's elements.
             success: function(data)
             {
                 alert(data); // show response from the php script.
             }
           });
  
      return false; // avoid to execute the actual submit of the form.
  });
  &lt;/script&gt;
  </code></pre>