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?
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
$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');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
</tr>why don't try this
url: base_url + "testurl?cid="+ customerid+"&checkbox="+checkState,
and remove "data:..." from ajax
if it still is not working then
<input type="checkbox" id="row1000" checked="checked" class="custom-control-input toggle-checkbox" >
javascript
var customerid = this.id.substring(3);