first ajax attempt--not syncing correctly

Question

So i'm trying to use a table that generates multiple submit buttons per row. I'm doing this with a php while loop. Each button has a value of the corresponding "id" from the database. The table populates with everything from the database that has a status of "Ordered". On each row I can click a button that will change it to "Received" or "Cancelled". This is why I assigned a value of "id" to each button, so it only affects the status of the row that's being clicked. So far, all this is working fine but I would like to be able to do this using ajax instead of refreshing the page each time.

Currently I have this for my ajax:

     $('#cancel').click(function(e) {
         e.preventdefault();
//set value of cancel button to a variable
          var value = $("#cancel").val();
                $.ajax({
                  method: "POST",
                  url: "updatetable.php",
                  data: {cancel: value},

                });
        });

and this for my PHP:

//updatetable.php
     if($_POST['cancel']) {

     echo $_POST['cancel'];
     }

the reason for the "if" statement is because I also need to click received but if yall help me figure this part out, i can go the rest of the way on my own.

Right now, I can't even get this to connect with a simple echo of the POST variable.

Just for reference, here is my html markup for the buttons:

<button type='submit' class='btn btn-danger' name = 'cancel' id = 'cancel' value='".$row['order_id']."'>Cancel</button>
 <button type='submit' class='btn btn-success' name = 'received' id= 'received' value='".$row['order_id']."'>Received</button>

(the buttons are output by a PHP echo statement-hence the concats in the value setting)

I've tried to follow several tutorials but I can't figure out why this doesn't connect the right way. Perhaps I need to change it to an input with type "button" instead of button type submit? But then the actual value of the "value" would appear as the text instead of the word "cancel". Any help is appreciated.

Answer 1

you are going to want to put a unique identifier on your IDs. Here is what I would do (instead):

function cancelClick(btn){    
    e.preventdefault();  // I dont think this is needed
    var value = $(btn).val();
    $.ajax({
        method: "POST",
        url: "updatetable.php",
        data: {cancel: value},
    });
});

actually I would do this but that isnt what you used:

function cancelClick(btn){    
    var value = $(btn).val();
    $.post("updatetable.php",{cancel: value});
});

then your UI like:

<button type='button' 
        class='btn btn-danger' 
        value='<?=$row['order_id'] ?>' 
        onClick="cancelClick(this)">Cancel
</button>
<button type='button' 
        class='btn btn-success' 
        value='<?=$row['order_id'] ?>'
        onClick="otherFnName(this)>Received
</button>

edit: to perform a task on return you do something like this:

function cancelClick(btn){    
    var value = $(btn).val();
    $.post("updatetable.php",{
      cancel: value
      }, function (d){
        // here is where you will do stuff on return.
        // I suggest first console.log(d); and see what is returning
        // return (echo) a value to at least identify the row
        // you are wanting to delete, if that is what you are attempting
        // be sure the element you are attempting to manipulate has
        // a unique identifier (id), and then do whatever.
        // you can call a function from here also, to make it neater
        // this area will `happen` when your ajax is complete.
      });
});