I want to make an AJAX call when the user clicks on a checkbox. The call sends an id along with the checkbox state. Right now when I click my checkbox it creates two AJAX calls, one with the first id in the list and one is correct one I clicked.
How can I send one ajax call of the checkbox I clicked?
HTML:
<tr class="test-row" data-customerid="1000">
<td data-content="Customer ID" class="" style="max-width:700px">1000</td>
<td class="toggle-checkbox" data-content="">
<div class="custom-control custom-switch no-click">
<input type="checkbox" checked="checked" class="custom-control-input toggle-checkbox" id="">
<label class="custom-control-label" for=""> </label>
</div>
</td>
I have hundreds of rows with customer id 1000, 1001, 1002 etc.
Right now the AJAX call is always 1000 and an ajax call with the customer id I clicked.
Lets say I click the checkbox on row with customer id 1005 then the AJAX call right now is:
testurl&cid=1000&checkbox=1
testurl&cid=1005&checkbox=1
JQuery:
$document.on('change', '.toggle-checkbox', function () {
var $this = $(this);
var customerid= $row.data('customerid');
var checkState = '';
if($(this).is(':checked')) {
checkState = 1;
}
else {
checkState = 0;
}
$.ajax({
url: base_url + "testurl",
type: "GET",
data: {cid: customerid, checkbox: checkState},
success: function (result) {
console.log('succesful change');
},
error: function (xhr, status, error) {
console.log('unsuccesful change');
}
});
});