title: Edit data on table row and save in database with ajax
body: <p>I'm not very good(not at all) with ajax/js and will need a little bit help here. </p>
  
  <p>I have table on page which I show data like this:</p>
  
  <pre><code>    &lt;table class="table table-bordered"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
              &lt;th&gt;People&lt;/th&gt;
              &lt;th&gt;Rate per person&lt;/th&gt;
              &lt;th width="200px"&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;?php 
          $result_rates = $conn-&gt;query("SELECT * FROM rates Where user_id = 60");
          if($result_rates-&gt;num_rows&gt;0){
              while ($row=$result_rates-&gt;fetch_all(MYSQLI_ASSOC)) {
                  foreach ($row as $r){
  
                  }
              }
          }
          ?&gt; 
          &lt;tr&gt;
             &lt;td&gt;1&lt;/td&gt;
  
             &lt;td &gt;$ &lt;?php if($r['rate_one'] &gt; 0){echo $r['rate_one'];}else{echo '0';} ?&gt;&lt;/td&gt;
             &lt;td&gt;&lt;button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item"&gt;Edit&lt;/button&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
             &lt;tr&gt;
                 &lt;td&gt;2&lt;/td&gt;
                 &lt;td&gt;$ &lt;?php if($r['rate_two'] &gt; 0){echo $r['rate_two'];}else{echo '0';} ?&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item"&gt;Edit&lt;/button&gt;&lt;/td&gt;
             &lt;/tr&gt;
  </code></pre>
  
  <p>I have also this modal on the <code>Edit</code> button click</p>
  
  <pre><code>    &lt;!-- Edit Item Modal --&gt;
      &lt;div class="modal fade" id="edit-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
        &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Edit Item&lt;/h4&gt;
            &lt;/div&gt;
  
            &lt;div class="modal-body"&gt;
                  &lt;form  action="includes/update.php" method="put"&gt;
                      &lt;input type="hidden" name="&lt;?php echo $r['rate_id']; ?&gt;" class="edit-id"&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label" for="title"&gt;People:&lt;/label&gt;
                          &lt;input type="text" name="rate_one" class="form-control" /&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label" for="title"&gt;Prise:&lt;/label&gt;
                          &lt;input type="text" name="rate_two" class="form-control" /&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;button type="submit" class="btn btn-success crud-submit-edit"&gt;Submit&lt;/button&gt;
                      &lt;/div&gt;
  
                  &lt;/form&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So when I click on Edit button modal is opened and the data is loaded. If I change some data and click on <code>Submit</code> I've got message for success but data isn't changed in database. </p>
  
  <p>This is the ajax part</p>
  
  <pre><code>/* Edit Item */
  $("body").on("click",".edit-item",function(){
  
      var id = $(this).parent("td").data('id');
      var rate_one = $(this).parent("td").prev("td").prev("td").text();
      var rate_two = $(this).parent("td").prev("td").text();
  
      $("#edit-item").find("input[name='rate_one']").val(rate_one);
      $("#edit-item").find("input[name='rate_two']").val(rate_two);
      $("#edit-item").find(".edit-id").val(id);
  
  });
  
  /* Updated new Item */
  $(".crud-submit-edit").click(function(e){
  
      e.preventDefault();
      var form_action = $("#edit-item").find("form").attr("action");
      var rate_one = $("#edit-item").find("input[name='rate_one']").val();
  
      var rate_two = $("#edit-item").find("input[name='rate_two']").val();
      var rate_id = $("#edit-item").find(".edit-id").val();
  
          $.ajax({
              dataType: 'json',
              type:'POST',
              url: form_action,
              data:{rate_one:rate_one, rate_two:rate_two,rate_id:rate_id}
          }).done(function(data){
              getPageData();
              $(".modal").modal('hide');
              toastr.success('Rate Updated Successfully.', 'Success Alert', {timeOut: 5000});
          });  
  });
  </code></pre>
  
  <p>When I look in dev console I see that <code>rate_id</code> isn't passed too. Can anyone help a bit?</p>
  
  <pre><code>  $id  = $_POST["rate_id"];
    $post = $_POST;
  
    $sql = "UPDATE rates SET rate_one = '".$post['rate_one']."'
      ,rate_two = '".$post['rate_two']."' 
      WHERE rate_id = '".$id."'";
  </code></pre>
  
  <p><strong>it is for testing purposes and thats why it isn't with prepared statements</strong></p>