javascript - Saving Text After Text-Swap -

i'm creating shipping status report , trying accomplish, can't seem figure out. in report table have button , shows "mark shipped". if click on button changes "shipped". going serve easy reporting method me.

i doing text swap this...

<script> //getting shipping status button chance 'mark shipped' 'shipped' $("button").on("click", function(e) {     e.preventdefault()     var el = $(this);     el.text() == el.data("text-swap")      ? el.text(el.data("text-original"))      : el.text(el.data("text-swap")); }); </script> 

i had add

e.preventdefault() 

into code because page reload after clicked on button.

one of issues having isn't allowing me go original. tried moving e.preventdefault() bottom of code, didn't help.

now main part of question want able save after have selected it. i'm not sure if have scratch i'm doing, house in db, or if can existing code... need save once selected though.

then 1 last thing. i'm not sure how pressing button. know how php, new js.

when select "mark shipped" want time stamp d - t -y , time added in td row. possible js?

i'm looking ways can accomplish doing of this. have looked on , can't seem find similar want.

any ideas?

update

i added in same script instructed. button doesn't change @ , nothing sending db.

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

php page called shippingstatussend.php

i started learning how prepared statements may issue too.

<?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'] );  /* 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();           /* close statement */         mysqli_stmt_close($stmt);             }  ?>      

in order make javascript changes static, you'll need use server side, such using php store change in database.

for that, you'll need use ajax, easy jquery:

$.ajax({     url: "example.php",     data: {action: "shipped", order: orderid},     type: "post",     datatype: "text" }).done(function(r){     //do code changing button here. }); 

change example.php php script make change server side, , make sure pass orderid of order you're changing. in php file, can access $_post['action'] , $_post['order'] information javascript.

then in done part (which called after ajax has finished), can update button. can error checking in there on safe side. r variable can used response data php file (for example, if echo "done" in php, r equal "done").

edit

as per updated question/code, problem creating ajax call when page loads, , not on button click. change to:

$("button").on("click", function(e) {     e.preventdefault();     var el = $(this);     $.ajax({         url: "shippingstatussend.php",         data: {action: "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"));     }); }); 

update order_id you'll need store in dom somewhere. per comments have in:

<td class="tdproduct"><?php echo $row['order_id']; ?> </td> 

so like:

var order_id = $('.tdproduct').text(); 

will id, if have 1 element class. otherwise you'll have store in other unique element grab.

saving on reload

once have value saved in database, need have php render on page load. rather having static html saying mark shipped, use php echo or print output information database.