Update status of each dynamic row using checkbox

Question

I have a form with dynamic rows, after fetching record I want to update status of selected rows by checkbox.

I'm successfully getting each row checkbox values and dynamic row id in console but when trying to update values, it's updating first row only.

HTML:

  <button type="button" class="btn btn-info" id="update_status_btn">Update Status</button>

Fetched record:

success: function(data){
      var trHTMLr = '';
       $.each(data,function(i,row){
       trHTMLr += '<tr>' + 
                     '<td><input type="text" name="first_name" class="form-control text-center" value="' + row.first_name + '" /></td>' + 
                     '<td><input type="checkbox" name="status" class="form-control text-center updatestatusclass" data-id="' + row.id + '" value="' + 'YES' + '"/></td>' + 
                  '</tr>';
});
$('#mytable').append(trHTML);
}

Update status:

   $("#update_status_btn").click(function(e) {
    e.preventDefault();
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      var eachrow_value=[];
      $('.updatestatusclass').each(function(){
      if($(this).is(":checked"))
      {
      eachrow_value.push($(this).val());  
      }
      });
      eachrow_value=eachrow_value.toString();
       var row_id = $('.updatestatusclass').attr('data-id');
      $.ajax({
       url: "{{ url('/updatestatus') }}",
    method: 'POST',
      data: {id: row_id, status: eachrow_value},
   dataType: 'json',
   success: function (response) {
           alert('Updated Successfully!');
          },
          error: function (response) {
            alert("Not Updated, Try again.");
          }
      });
  });

Controller:

  if ($request->ajax()) {
            $stat = Services::where('id', $request->get('id'))
                ->update(array(
                    'status' =>  $request->get('status')
                ));
            return Response::json($stat);
        }

I want to update status of selected row by checkbox with it's respective row ID.

score 4 · Accepted Answer · answered Nov 03 '19 at 11:31

What you are looking for is to update multiple checkboxes in one go. So, you need to store both selected & unselected checkboxes.

Your jQuery

let checkedIds = [];
let unCheckedIds = [];
$('.updatestatusclass').each(function () {
    if ($(this).is(":checked")) {
        checkedIds.push($(this).attr('data-id'));
    } else {
        unCheckedIds.push($(this).attr('data-id'));
    }
});

$.ajax({
    url: "{{ url('/updatestatus') }}",
    method: 'POST',
    data: {
        checkedIds: checkedIds,
        checkedIdStatus: 'active', //do your thing
        unCheckedIds: unCheckedIds,
        unCheckedIdStatus: 'inactive', //do your thing
    },
    dataType: 'json',
    success: function (response) {
        alert('Updated Successfully!');
    },
    error: function (response) {
        alert("Not Updated, Try again.");
    }
});

In your Controller

if ($request->ajax()) {
    Services::whereIn('id', $request->get('checkedIds'))
        ->update(array(
            'status' =>  $request->get('checkedIdStatus')
        ));
    Services::whereIn('id', $request->get('unCheckedIds'))
        ->update(array(
            'status' =>  $request->get('unCheckedIdStatus')
        ));
}

Hope this helps. Cheers!

Update status of each dynamic row using checkbox

1 Answers1

Linked