title: jQuery get values from current form
body: <p>Hello everyone I'm working on a project and I'm pretty sure I've made a rather large mistake. Basically I have some PHP code that retrieves some values from a database, and each row gets its own  in a table. Then each one has a button that deletes it, which shows a small dropdown form asking for some details along with a submit button. However, I for some reason wasn't thinking that there would be multiple forms, and have each input an id, resulting in multiple elements having the same id.</p>
  
  <p>So, in JavaScript, an AJAX request is made when a user submits deleting a row, and the values from the form (values are found by the ID of the input) are sent as POST variables to a PHP script. Since I'm doing this, the AJAX request only works if they're deleting the first row, but not any under that.</p>
  
  <p>So, this HTML is output by PHP to add a dropdown form to each row:</p>
  
  <pre><code>&lt;td class='dropdown'&gt;&lt;a class='dropdown-toggle' href='#' data-toggle='dropdown'&gt;&lt;button class='btn btn-warning'&gt;Kick&lt;/button&gt;&lt;/a&gt;
  &lt;div class='dropdown-menu' style='padding:15px; width:340px'&gt;
      &lt;div class='form-group'&gt;
          &lt;form id='delete-form'&gt;
              &lt;label for='delete-reason'&gt;Reason: &lt;/label&gt;
              &lt;input class='form-control' id='delete-reason' name='delete-reason'&gt;
              &lt;input type='hidden' id='delete-id' name='delete-id' value='". $value['Name'] ."''&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;input type='submit' id='delete-submit' name='delete-submit' value='Delete ". $value['Name'] ."' class='btn btn-default'&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Then I use this JavaScript to submit the form to send the data from the form to a PHP script by an AJAX request.</p>
  
  <pre><code>$("#delete-form").submit(function(e){
  e.preventDefault() // stop form from submitting
  var reason = $("#delete-reason").val();
  var id = $("#delete-id").val()
  
  $.ajax({
      type: 'POST',
      url: 'php/ajax.php',
      data: { 
          deletereason: player,
          deleteid: id
      },
      success: function(response){
          $("#delete-result").append(response);
          $("#delete-result").fadeIn(500);
      }
  })
  </code></pre>
  
  <p>})</p>
  
  <p>So, like I said, it only works on the first row because on the others, it just gets the values of the first found input with that id. And when I do it on any row besides the first, it adds the values as a query string, which doesn't do anything because well, it's not supposed to. </p>
  
  <p>However I don't really know how to make it where it would get the values from the current form, not the others, and that's why I'm here.</p>
  
  <p>I understand this is all pretty confusing and if you need me to clarify anything or explain more I'd be happy to. </p>
  
  <p>Any suggestions?</p>