I am currently creating a system where it has to be possible to check/uncheck a checkbox. Everytime it changes status I need jQuery to make an AJAX call to a page, that updates the database.
How can I do this?
Add a comment
|
5 Answers
For example you can do it like this:
First you have to look if the checkbox is checked:
$("#yourSelector").live("click", function(){
var id = parseInt($(this).val(), 10);
if($(this).is(":checked")) {
// checkbox is checked -> do something
} else {
// checkbox is not checked -> do something different
}
});
You can load specific content via Ajax:
$.ajax({
type: "POST",
dataType: "xml",
url: "path/to/file.php",
data: "function=loadContent&id=" + id,
success: function(xml) {
// success function is called when data came back
// for example: get your content and display it on your site
}
});
1 Comment
David Thomas
Remember that you'll need to declare the variable
id somewhere before assigning it a value. And, if using parseInt() it's always worth specifying the radix: parseInt($(this).val(), 10);Which bit are you stuck on? You should probably have something like this...
$('#myCheckbox').click(function() {
var checked = $(this).is(':checked');
$.ajax({
type: "POST",
url: myUrl,
data: { checked : checked },
success: function(data) {
alert('it worked');
},
error: function() {
alert('it broke');
},
complete: function() {
alert('it completed');
}
});
});
answered May 16, 2011 at 12:50
fearofawhackplanet
53.6k55 gold badges167 silver badges258 bronze badges
1 Comment
Dennis Lauritzen
Well i'm stuck on the click-thing. I have read that it is bad to use click with checkbox. And when I try to perform alerts when the checkbox is clicked it does not alert anything - so I'm not sure, that it is working :s
Detect if checkbox is checked:
if ( $('#id').is(':checked') ) { }
This can be executed in a function that is triggered by "onchange" event.
function checkCheckboxState() {
if ( $('#id').is(':checked') ) {
// execute AJAX request here
}
}
Comments
Something like this probably?
$('.checkbox').click(function (){
var val = $(this).is(':checked');
$.load('url_here',{status:val});
});
Comments
<input type="checkbox" name="foo" value="bar" class="checkIt"/>
<script type="text/javascript">
$('.checkIt').bind('click', function() {
if($(this).is(":checked")) {
// checkbox is checked
} else {
// checkbox is not checked
}
});
</script>
You can now have more than one checkbox.
