javascript - Using Ajax and PHP to insert a result in my db and then display it -

i'm attempting create shipping status page , want basic feature work. want able press button on page says "mark shipped". want button's text change "shipped". want option change status of "mark shipped', have alert prevent doing until click proceed or that.

i attempting php , ajax. i've never used ajax before or js, i'm not sure on how use 2 simultaneously.

i have created database table house status of 'shipped' status, whenever click 'mark shipped' button word 'shipped' go db table id of order , want word shipped echo button , remain there indefinitely. php query working great until changed action of ajax script.

so table..

if( $result ){   while($row = mysqli_fetch_assoc($result)) : ?>                  <form method="post" action="shippingstatus.php">                     <tr>                         <td class="tdproduct"><?php echo $row['order_id']; ?> </td>                         <td class="tdproduct"><?php echo $row['date_ordered']; ?> </td>                          <td class="tdproduct"><?php echo $row['customer_name']; ?> </td>                         <td class="tdproduct"><?php echo $row['streetline1'] . "<br />" . $row['streetline2'] . "<br />" . $row['city'] . ", " . $row['state'] . " " . $row['zipcode']; ?> </td>                         <td class="tdproduct"><?php echo $row['product_name']; ?> </td>                         <td class="tdproduct"><button data-text-swap="shipped">mark shipped</button></td>                         <input type="hidden" name="product_id" value="<? echo $row['id']; ?>"/>                         <td class="tdproduct"><input name="delete" type="submit" value="delete "/></td>                     </tr>                 </form> <?php      endwhile;    } ?>                 </table> 

this ajax script. @ first had 'shipped' action, wasn't saving status. when reload page go 'mark shipped'.

<script> $("button").on("click", function(e) {     e.preventdefault()     var el = $(this);     $.ajax({         url: "shippingstatussend.php",         data: {action: "<?php echo $shipped; ?>", order: order_id},         type: "post",         datatype: "text"         }).fail(function(e,t,m){         console.log(e,t,m);      }).done(function(r){         //do code changing button here.         //getting shipping status button chance 'mark shipped' 'shipped'         el.text() == el.data("text-swap")          ? el.text(el.data("text-original"))          : el.text(el.data("text-swap"));     }); }); </script> 

my php in page called shippingstatussend:

<?php //connection db $con = mysqli_connect("localhost", "root", "", "bfb");   //check errors   if (mysqli_connect_errno()) {     printf ("connect failed: %s\n", mysqli_connect_error());     exit();  }     $order_id = trim($_post['order_id'] );     $status = trim($_post['action'] );     $shipped = "shipped";     $markshipped = "mark shipped";  /* create prepared statement */ if ($stmt = mysqli_prepare($con, "insert shippingstatus (order_id, status, date_shipped) values (?, ?, now())")) { /* bind parameters markers */             $stmt->bind_param('is', $order_id, $status);         /* execute query */         $stmt->execute();         echo $shipped;      /* close statement */     mysqli_stmt_close($stmt);         }          while($row = mysqli_fetch_assoc($stmt)){         $shipped = $row['status'];         $markshipped = "mark shipped";         }         else          echo $markshipped; ?> 

i not sure doing wrong, point me in direction of wrong? php code or way i'm attempting ajax or both. area of code wrong?

this doesn't seem right.

 data: {action: "<?php echo $shipped; ?>", order: order_id}, 

i try adding parameters ajax script , use post instead of trying access php variable in-line.

    function insert(anaction, anorder){         $.ajax({            url: 'shippingstatussend.php',            datatype: 'json',            type: "post",            data: ({action: anaction, order: anorder}),         });     }    

then, in button i'd call function in onclick

<button id="some_button" onclick="insert(<?php echo $row['action'] . ',' . $row['order_id']; ?>)"