Toggle Checkbox and send query in background to update database - php

Question

As soon as someone toggles a checkbox. I want a the value sent to a php page for it to update it in my database.
HTML:
<div class="form-group">
<div class="tg-optionbox">
<span>Promotional Video</span>
<span class="tg-iosstylcheckbox">
<input type="checkbox" id="video" name="video" value="video">
<label for="video"></label>
<div id="echo2"></div>
</span>
</div>
</div>
JQUERY:
$(document).ready(function(){
$("input[type=checkbox]").click(function () {
$.ajax({
type: "POST",
url: "get/update-feature.php",
data: {
value: $('input:checkbox:checker').val()
},
success: function(data) {
$('#echo2').html(data);
}
});
});
});
PHP:
<?
$sent_value = $_POST['value'];
if(isset($sent_value)){
//update database
echo "updated";
}else{
//update database
}
?>
Currently, my jquery doesn't work. How I need it:
They click the orange checkbox toggle
Jquery recognises this and sends the checkbox value to my php page
my php page gets the value and puts it in the database

Answer 1

instead of echo use "return true" if success else false in php code
$(document).ready(function(){
$("#video").click(function () {
$.ajax({
type: "POST",
url: "get/update-feature.php",
data: {
value: $('input[type=checkbox]').val()
},
success: function(data) {
$('#result').html(data);
}
});
});
});
<div class="form-group">
<div class="tg-optionbox">
<span>Promotional Video</span>
<span class="tg-iosstylcheckbox">
<input type="checkbox" id="video" name="video" value="video">
<label for="video"></label>
<div id="echo2"><p id="result"></p></div>
</span>
</div>
</div>
The error is in $('input:checkbox:checker').val() so the value is not sent to php file and the success method expects a return value in php. We need to use "return" instead of "echo"

Answer 2

Hope this can help you.
HTML: Not Changed
<div class="form-group">
<div class="tg-optionbox">
<span>Promotional Video</span>
<span class="tg-iosstylcheckbox">
<input type="checkbox" id="video" name="video" value="video">
<label for="video"></label>
<div id="echo2"></div>
</span>
</div>
</div>
JavaScript: Changed
Replaced: value: $('input:checkbox:checker').val() by: value: $(this).prop("checked") ? 1 : 0
You have to send the value of the clicked checkbox. So you must use $(this).
To get the value of the checkbox use .prop("checked"). If the returned value is true, then it is checked. If it is false, then it is not checked.
So if the checkbox is checked, 1 is sent. If not, 0 is sent
$(document).ready(function(){
$("input[type=checkbox]").click(function () {
$.ajax({
type: "POST",
url: "get/update-feature.php",
data: {
value: $(this).prop("checked") ? 1 : 0
},
success: function(data) {
$('#echo2').html(data);
}
});
});
});
PHP: Changed
If the value is equal to 1 or value equal to 0
<?php
$sent_value = $_POST['value'];
if(isset($sent_value)){
if ($sent_value == 1) {
echo "Checked" ;
}
else {
echo "Un Checked" ;
}
}
else{
echo "Error" ;
}
?>

Answer 3

Use .change() event handler :
$('input:checkbox').change(function () {
var name = $(this).val();
var check = $(this).attr('checked');
//Your Ajax code
});