Ajax jquery button that on change changes color and the value of a coloumn to true or false

Question

So i have this table

ECDLpayments -> ecdp_Payed = boolean true or false

Controller

  public function addUserPayments()
{
    if (Request::ajax()) {
        $input = Input::all();

        $newpayment = new ECDLPayments();
        $newpayment->ecdp_homeStudid = $input['userpaymentid'];
        $newpayment->ecdp_Amount = $input['userpaymentamount'];
        $newpayment->ecdp_DatePayed = date('Y-m-d', strtotime($input['date']));
        $newpayment->ecdp_Receipt = $input['userpaymentreceipt'];

        $newpayment->save();

        $result = DB::table('ECDLPayments')
            ->where('ecdp_ID', $newpayment->ecdp_ID)
            ->get();

        return $result;
    }
}

public function deleteUserPayments()
{
    if (Request::ajax()) {
        $input = Input::all();

        ECDLPayments::find($input['ecdpid'])->delete();
        return 'ok';
    }
}

Ajax / jquery code

//USER PAYMENTS
$('#insert-user-payments-btn').click(function(e){
    e.preventDefault();
    var userpaymentstable = $('#user-payments-table');

    var userpaymentamount = $('#userpaymentamount').val();
    var date = $('#userpaymentdate').val();
    var userpaymentreceipt = $('#userpaymentreceipt').val();
    var userpaymentid = $('#paymentuserid').val();

    if(userpaymentamount == '' || date == '' || userpaymentreceipt==''){
            alert('');
    } else {
        $.ajax({
            type:'POST',
            url:base_url+'/addUserPayments',
            data:{
                userpaymentamount:userpaymentamount,
                date:date,
                userpaymentreceipt:userpaymentreceipt,
                userpaymentid:userpaymentid
            },
            success: function(data){
                var fullDate = new Date(data[0].ecdp_DatePayed);
                var twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1);
                var currentDate = fullDate.getDate() + "-" + twoDigitMonth + "-" + fullDate.getFullYear();
                console.log(data);
                userpaymentstable.show();
                userpaymentstable.find('tbody').append(
                    "<tr data-id="+data[0].ecdp_ID+">" +
                    "<td class='col-md-3'>"+data[0].ecdp_Amount+"</td>"+
                    "<td class='col-md-4'>"+currentDate+"</td>"+
                    "<td class='col-md-4'>"+data[0].ecdp_Receipt+"</td>"+
                    "<td class='col-md-1 text-center'><a class='btn btn-danger remove-payment'><i class='fa fa-trash'></i></a><a class='btn btn-success change-payment-status'><i class='fa fa-check-circle'></i></a></td>"+
                    "</tr>")
            }
        });
    }

});

$(document).on('click','.remove-payment',function(){
    var ecdpid = $(this).closest('tr').data('id');
    var tr = $(this).closest('tr');

    $.ajax({
        type:'POST',
        url: base_url+'/deleteUserPayments',
        data: {ecdpid: ecdpid},
        success: function(data){
            tr.remove();
        }
    });
});

Routes

Route::post('addUserPayments',"UserController@addUserPayments"); Route::post('deleteUserPayments',"UserController@deleteUserPayments");

I want the button change-payment-status to change the value of the ecdp_Payed to true/false but default true and changes color green/red like the remove button with ajax and jquery

Answer 1

Change the last lines of your ajax call by adding the snippet in the below example

    $.ajax({
                type:'POST',
                url:base_url+'/addUserPayments',
                data:{
                    userpaymentamount:userpaymentamount,
                    date:date,
                    userpaymentreceipt:userpaymentreceipt,
                    userpaymentid:userpaymentid
                },
                success: function(data){
                    var fullDate = new Date(data[0].ecdp_DatePayed);
                    var twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1);
                    var currentDate = fullDate.getDate() + "-" + twoDigitMonth + "-" + fullDate.getFullYear();
                    console.log(data);
                    userpaymentstable.show();
                    userpaymentstable.find('tbody').append(
                        "<tr data-id="+data[0].ecdp_ID+">" +
                        "<td class='col-md-3'>"+data[0].ecdp_Amount+"</td>"+
                        "<td class='col-md-4'>"+currentDate+"</td>"+
                        "<td class='col-md-4'>"+data[0].ecdp_Receipt+"</td>"+
                        "<td class='col-md-1 text-center'><a class='btn btn-danger remove-payment'><i class='fa fa-trash'></i></a><a class='btn btn-success change-payment-status'><i class='fa fa-check-circle'></i></a></td>"+
                        "</tr>");

//////////////////////////////////////////////////////////////////////////    
                    data[0].ecdp_Payed = true;
                    $(document).on('click','.change-payment-status',function(){
                        $(this).toggleClass("btn-success btn-danger");
                        data[0].ecdp_Payed = !data[0].ecdp_Payed;
                    });
//////////////////////////////////////////////////////////////////////////    
                }