title: Form action not allowing the delete of a record
body: <p>I had to add a <code>form</code> action to go to a different page to edit a specific record, but with doing that, it won't allow me to delete a record because it is taking me away from it before it will do the <code>query</code>. I am unsure of how to make this work and still get to the new page when I hit the "Edit" button.</p>
  
  <pre><code>&lt;table id="tableid"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;
                  &lt;th&gt;Product&lt;/th&gt;
                  &lt;th&gt;Save&lt;/th&gt;
                  &lt;th&gt;Delete&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
  
          &lt;?php
          $stmt = $dbc-&gt;query("SELECT `id`,`first`,`last`,`product` FROM users");
          $stmt-&gt;setFetchMode(PDO::FETCH_ASSOC);
  
          while($row = $stmt-&gt;fetch()) {
          ?&gt;
          &lt;form method="POST" action="edit-product"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;?php echo $row['id'];?&gt;"&lt;/td&gt;
                  &lt;td&gt;&lt;?php echo $row['first'];?&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;?php echo $row['last'];?&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;?php echo $row['product'];?&gt;&lt;/td&gt;
                  &lt;input name="id" type="hidden" value="&lt;?php echo $row['id'];?&gt;" readonly&gt;
                  &lt;input name="first" type="hidden" value="&lt;?php echo $row['first'];?&gt;"&gt;
                  &lt;input name="last" type="hidden" value="&lt;?php echo $row['last'];?&gt;"&gt;
                  &lt;input name="product" type="hidden" value="&lt;?php echo $row['product'];?&gt;"&gt;
                  &lt;td&gt;&lt;input name="save" type="submit" value="Save"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;div class="delete-class" name="delete" id="&lt;?php echo $row['id']; ?&gt;"&gt;Delete&lt;/div&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input name="edit" type="submit" value="Edit"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/form&gt;
          &lt;?php } ?&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>PHP <code>DELETE</code> <code>query</code></p>
  
  <pre><code>if(isset($_POST['delete'])) {
      $id = $_POST['id'];
      $stmt = $dbc-&gt;prepare("DELETE FROM users WHERE id = :id");
      $stmt-&gt;bindParam(':id', $id);
      $stmt-&gt;execute();
  }
  </code></pre>
  
  <p>How can I change the markup to still get both the edit (going to another page with the action) and the delete to work on this page?</p>
  
  <p>UPDATE AJAX code:</p>
  
  <pre><code>$(function() {
  
      $(".delete_class").click(function(){
     var del_id = $(this).attr('id');
     $.ajax({
        type:'POST',
        url:'delete-product.php',
        data:'delete_id='+del_id,
        success:function(data) {
          if(data) {   // DO SOMETHING
          } else { // DO SOMETHING }
        }
  )); //here
   });
  
  });
  </code></pre>