Edit data on table row and save in database with ajax

Question

I'm not very good(not at all) with ajax/js and will need a little bit help here.

I have table on page which I show data like this:

    <table class="table table-bordered">
        <thead>
            <tr>
            <th>People</th>
            <th>Rate per person</th>
            <th width="200px">Action</th>
            </tr>
        </thead>
        <tbody>
            <?php 
        $result_rates = $conn->query("SELECT * FROM rates Where user_id = 60");
        if($result_rates->num_rows>0){
            while ($row=$result_rates->fetch_all(MYSQLI_ASSOC)) {
                foreach ($row as $r){

                }
            }
        }
        ?> 
        <tr>
           <td>1</td>

           <td >$ <?php if($r['rate_one'] > 0){echo $r['rate_one'];}else{echo '0';} ?></td>
           <td><button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button></td>

        </tr>
           <tr>
               <td>2</td>
               <td>$ <?php if($r['rate_two'] > 0){echo $r['rate_two'];}else{echo '0';} ?></td>
               <td><button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button></td>
           </tr>

I have also this modal on the Edit button click

    <!-- Edit Item Modal -->
    <div class="modal fade" id="edit-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Edit Item</h4>
          </div>

          <div class="modal-body">
                <form  action="includes/update.php" method="put">
                    <input type="hidden" name="<?php echo $r['rate_id']; ?>" class="edit-id">

                    <div class="form-group">
                        <label class="control-label" for="title">People:</label>
                        <input type="text" name="rate_one" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="title">Prise:</label>
                        <input type="text" name="rate_two" class="form-control" />
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-success crud-submit-edit">Submit</button>
                    </div>

                </form>

          </div>
        </div>
      </div>
    </div>

So when I click on Edit button modal is opened and the data is loaded. If I change some data and click on Submit I've got message for success but data isn't changed in database.

This is the ajax part

/* 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});
        });  
});

When I look in dev console I see that rate_id isn't passed too. Can anyone help a bit?

  $id  = $_POST["rate_id"];
  $post = $_POST;

  $sql = "UPDATE rates SET rate_one = '".$post['rate_one']."'
    ,rate_two = '".$post['rate_two']."' 
    WHERE rate_id = '".$id."'";

it is for testing purposes and thats why it isn't with prepared statements

Answer 1

In form data you are not setting rate id in value. Please do the below changes.

<input type="hidden" name="edit-id" class="edit-id" value=<?php echo $r['rate_id']; ?>>

and also please share the php code of update.php for better help.