Send data-attribute ID in JS to PHP on same index page using ajax?

Question

I am not sure how to word this title. Feel free to edit it.

Intro I am doing a datatables.net library server-side table using JSON and PHP. I am basically done except for the edit form.

My first problem was solved. I had a while loop instead of an if statement.

My second problem is now going to be transferring this Javascript code near before the AJAX call:

var edit_id = $('#example').DataTable().row(id).data();
    var edit_id = edit_id[0];

to here which is php:

$edit_id = $_POST['edit_id'];

They are both on the same page, index.php so I do not think I can use ajax for this.

Index.php

<script type="text/javascript">
  $(document).on('click', '.edit_btn', function() {
    var id = $(this).attr("id").match(/\d+/)[0];
    var edit_id = $('#example').DataTable().row(id).data();
    var edit_id = edit_id[0];  
     $("#form2").show();

    //console.log(edit_id[0]); 
    $.ajax({
      type: 'POST',
      url: 'edit.php',
      data: {
        edit_id: edit_id,
        first_name: $("#edit2").val(),
        last_name: $("#edit3").val(),
        position: $("#edit4").val(),
        updated: $("#edit5").val(),
      },
      success: function(data) {
        alert(data);
        if (data == 'EDIT_OK') {
          alert("success");
        } else {
          //   alert('something wrong');
        }
      }
    })
  });
</script>

<?php 
    $sql="select * from employees WHERE id=$edit_id";
    $run_sql=mysqli_query($conn,$sql);
        while($row=mysqli_fetch_array($run_sql)){
            $per_id=$row[0];
            $per_first=$row[1];
            $per_last=$row[2];
            $per_position=$row[3];
            //$per_date=$row[4];
            $per_updated=$row[5];
           ?>

<form id="form2" class="form-horizontal">
  <label class="col-sm-4 control-label" for="txtid">ID</label>
  <input id="edit1" type="text" class="form-control" name="txtid" value="<?php echo $per_id;?>" readonly>

  <div class="form-group">
    <label class="col-sm-4 control-label" id="edit2" for="txtname">First Name</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="txtname" name="txtname" value="<?php echo $per_first;?>">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="txtsalary">Last Name</label>
    <div class="col-sm-6">
      <input type="number" class="form-control" id="edit3" name="txtsalary" value="<?php echo $per_last;?>">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="txtage">Position</label>
    <div class="col-sm-6">
      <input type="number" class="form-control" id="edit4" name="txtage" value="<?php echo $per_position;?>">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="txtage">Updated</label>
    <div class="col-sm-6">
      <input type="number" class="form-control" id="edit5" name="txtage" value="<?php echo $per_updated;?>">
    </div>

    <button type="button" class="close" value="Cancel" data-dismiss="modal">&times;</button>
    <button type="button" class="update" value="Update"></button>
</form>

edit.php

$edit_id = $_POST['edit_id']; 
$stmt = $conn->prepare("UPDATE employees SET first_name=?, last_name=?, position=?, updated=? WHERE id=?");
$stmt->bind_param('ssssi', $_POST['first_name'], $_POST['last_name'], $_POST['position'], $_POST['updated'], $_POST['edit_id']);
$confirmUpdate = $stmt->execute();

if($confirmUpdate) {
    echo "EDIT_OK";
   }else {
  trigger_error($conn->error, E_USER_ERROR);
  return;
}
?>

Have you tried checking whether the markup created by your PHP code is fine? Maybe, the problem is that you generate multiple HTML elements with the same ID? — Nico Haase, Sep 13 '18 at 08:23
you mean the first_name being used twice? yeah i thought about that. i can change that. — , Sep 13 '18 at 08:24
is inside a loop. If you have more than one form, you will have form2 more than once. Use the class — mplungjan, Sep 13 '18 at 08:25
ahh makes sense you are correct. it probably needs to be an if or something. — , Sep 13 '18 at 08:26
that fixed a lot. now how do i get var edit_id = $('#example').DataTable().row(id).data(); var edit_id = edit_id[0]; to $edit_id = $_POST['edit_id']; They both on index.php page so cant send it to edit.php with ajax? — , Sep 13 '18 at 14:24
i probably have to do something like this: https://stackoverflow.com/questions/19323010/execute-php-function-with-onclick — , Sep 13 '18 at 15:08

score 0 · Answer 1 · answered Sep 23 '18 at 00:07

I eventually figured it out:

<script type="text/javascript"> 
        $(document).on('click','.edit_btn',function (){
              var id = $(this).attr("id").match(/\d+/)[0];
                var edit_id = $('#example').DataTable().row( id ).data();
                var edit_id = edit_id[0];
        alert(edit_id);
            $.ajax({
                 url: 'index.php',
              data: { edit_id : edit_id },
                contentType: 'application/json; charset=utf-8',
                success: function(result) {
                      //alert(result);
                }
            });
        });
        </script>

Send data-attribute ID in JS to PHP on same index page using ajax?

1 Answers1