I'm attempting to utilize AJAX to send a checkbox value to an external function.
Although I have the function working with the current JavaScript code, it's quite messy because I'm duplicating the script for each instance that exists.
<form>
<input type="checkbox" name="event_status" id="event_status1455" value="1" <?php echo ($event_status == '1' ? 'checked="checked"' : '') ?>>
</form>
<form>
<input type="checkbox" name="event_status" id="event_status1456" value="1" <?php echo ($event_status == '1' ? 'checked="checked"' : '') ?>>
</form>
<form>
<input type="checkbox" name="event_status" id="event_status1457" value="1" <?php echo ($event_status == '1' ? 'checked="checked"' : '') ?>>
</form>
<script>
$('input:checkbox').change(function(e) {
e.preventDefault();
var isChecked = $("input:checkbox").is(":checked") ? 1:0;
$.ajax({
type: 'POST',
url: '<?php echo $this->url('/profile/list', 'event_status', $cobj->getCollectionID())?>',
data: { event_status:$("input:checkbox").attr("id"), event_status:isChecked }
});
});
</script>
The issue lies in the fact that the current JavaScript only applies to a specific checkbox. I am searching for a way to create a single JavaScript function on my page that can handle multiple checkboxes.
I've made some modifications to the original code. While my AJAX is functioning as desired, it only works for the last checkbox. Is there a way to adjust the JavaScript to make it work for all checkboxes?