Send POST when checkbox is ticket - without submit button - php

Question

I want to send POST data without submit button, when one of the checkboxes are ticked - USING AJAX.
I have this code, but I think, that when I tick checkbox, I should get an alert with posted data (to know, that its working), but I dont get any reaction at all. I've added jquery so it's some kind of error in code function..
<form method="post" name="form1">
<input type="checkbox" name="checkboxList[]" value="1">value1</input>
<input type="checkbox" name="checkboxList[]" value="2">value2</input>
<input type="checkbox" name="checkboxList[]" value="3">value3</input>
</form>
<script>
jQuery(document).ready(function($){
// jQuery code is in here
$("input[type=checkbox]").on("click", function() {
var data = $(this).val();
console.log(data); // 1, 2 or 3 (value)
$.ajax({
url: "<?php echo JURI::getInstance(); ?>", // URL should be correct!
type: "POST",
async: true,
cache: false,
data: {data: data},
dataType: 'text',
success: function(data){
alert(data);
}
});
});
});
</script>
PROBLEM: Getting HTML content of page, not value on success method

Answer 1

Change your Html as below 1. remove </input> and change 2. change form name to id
<form method="post" id="form1">
<input type="checkbox" name="checkboxList[]" value="1">value1
<input type="checkbox" name="checkboxList[]" value="2">value2
<input type="checkbox" name="checkboxList[]" value="3">value3
</form>
Change in JS
var data = $("#form1").serialize();
Your form was not selecting and in post there was blank data

Answer 2

Try below code.
<form method="post" name="form1">
<input type="checkbox" name="checkboxList[]" value="1">value1</input>
<input type="checkbox" name="checkboxList[]" value="2">value2</input>
<input type="checkbox" name="checkboxList[]" value="3">value3</input>
</form>
<script>
$("input[type=checkbox]").on("click", function() {
var data = $("form").serialize();
$.ajax({
url: "../../x.php", // URL should be correct!
type: "POST",
async: true,
cache: false,
data: {data: data},
dataType: 'json',
success: function(response_data){
alert(response_data);
}
});
});
</script>