Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

I am currently doing a system where it has to be possible to check/uncheck a checkbox. Everytime it changes status I need jquery to make and ajax call to a page, that updates the database.

My problem is - how can I do this, so it updates?

Thanks in advance.

share|improve this question
3  
So what have you tried? What went wrong? – David Thomas May 16 '11 at 12:46

5 Answers

up vote 6 down vote accepted

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
                }
});
share|improve this answer
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); – David Thomas May 16 '11 at 12:51
1  
Thanks for your hints! I updated my answer. – Sarah West May 16 '11 at 12:54
2  
no problem at all, glad to be of help :) – David Thomas May 16 '11 at 12:57
up vote 3 down vote

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');
        }
    });
}
share|improve this answer
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 – Dennis Lauritzen May 16 '11 at 16:27
up vote 2 down vote

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

    }
}
share|improve this answer
up vote 2 down vote

Something like this probably?

$('.checkbox').click(function (){
    var val = $(this).is(':checked');
    $.load('url_here',{status:val});
});
share|improve this answer
up vote 2 down vote 
<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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.