Question

Apologies what what is probably a poor title for this question – I struggled to come up with anything better!

I’m working on a simple ‘to do’ list as part of a wider application, and have hit a stumbling block with my limited jQuery/Javascript knowledge.

The page features a number of checkboxes – one alongside each ‘task’. What I need to do is fire off a ‘get’ event each time a checkbox is checked or unchecked (the ‘get’ will fire a backend script that saves the status – i.e checked will save it as ‘done’, whereas unchecking it will save it as ‘pending’).

I’ve got so far as to fire back an alert when the user interacts with the checkboxes, and have now got the alert to display the value (which is a simple ID of the task) of the checkbox, but I’m stuck on how I get all of this together to trigger the .get

Here’s what I have so far…

<script>
$(document).ready(function(){
$(":checkbox").change(function(){
    if($(this).attr("checked"))
    {
        alert($(this).is(':checked'))
    }
    else
    {
        alert($(this).val());
    }
});
});
</script>

<input type="checkbox" value="#itemID#">

Pointers much appreciated!

Answer 1

Can do an AJAX request as follows:

$(":checkbox").change(function(){
     var data= { 
         id: this.value,
         status : this.checked ? 'done' :'pending'
     } ;
    $.get( 'serverFile.php', data, function(response){
         /* ajax is complete here, can do something with response if needed*/
     })

});

At server you would receive the data as you would a form with field names id and status