How to update database table and change the button using ajax php?

Question

I have a button named Finish Payment in my page:

<button style="background-color:#73bd5a; color:#FFF;" id="finish_payment" 
name="finish_payment" type="button" class="btn btn-white active pull-right">
<i class="ion-checkmark-circled"></i></i> Finish Payment</button>

What I want to do is when I click this button I want to update the payment status "Unpaid" to "Paid" in table client_payment and after updating change the button text to paid without refreshing the page. The ajax code I have used is given below:

<script>
$(document).ready(function(){
         $(document).on('click', '.finish_payment', function(){  

       $.ajax({  
            url:"update_payment.php?id=<?php echo $client_id; ?>",  
            method:"POST",  
            dataType:"json",  
            success:function(data){  
              alert(data);  
            }  
       });  
  });  

And the server side code I have is:

$connection = mysqli_connect("localhost", "root", "", "bn");
 $client_id=$_GET['id'];

 $query="update client_payment set payment_status='true' where 
  client_id=$client_id";
 if(mysqli_query($connection, $query)){

echo"Payment Complete";
}

Answer 1

Change your update query like this:

$query="update client_payment set payment_status='true' where 
  client_id='".$client_id."'";  // `'` was missing in where clause.

And to update button text, you can do the following:

$(document).ready(function(){
     $(document).on('click', '#finish_payment', function(){  // finish_payment is id attribute not class. So using with #

     $.ajax({  
        url:"update_payment.php?id=<?php echo $client_id; ?>",  
        method:"POST",  
        dataType:"json",  
        success:function(data){  
            $('.finish_payment').text('Paid');    // Changing button text here.
        }  
   });