I got a table of checkboxes:

<td><input id="box" name="box" type="checkbox" value="1" checked /></td>
<td><input id="box" name="box" type="checkbox" value="2" checked /></td>
<td><input id="box" name="box" type="checkbox" value="3" checked /></td>

I want to submit checkbox value when I check or uncheck the box (each one at a time) Without refreshing the page to:

if (isset($_GET['box'])) {
   echo "Success!"
}

By far I got this javascript code to check whether the box is checked or unchecked:

function validate(){ 
if (document.getElementById('box').checked){
    alert("checked") ;
}else{
    alert("You didn't check it! Let me check it for you.")
}
}

I want to add AJAX on it, but all the snippet code I try so far didn't fit good with my code. I'll thank for your help.

I got a table of checkboxes:

<td><input id="box" name="box" type="checkbox" value="1" checked /></td>
<td><input id="box" name="box" type="checkbox" value="2" checked /></td>
<td><input id="box" name="box" type="checkbox" value="3" checked /></td>

I want to submit checkbox value when I check or uncheck the box (each one at a time) Without refreshing the page to:

if (isset($_GET['box'])) {
   echo "Success!"
}

By far I got this javascript code to check whether the box is checked or unchecked:

function validate(){ 
if (document.getElementById('box').checked){
    alert("checked") ;
}else{
    alert("You didn't check it! Let me check it for you.")
}
}

I want to add AJAX on it, but all the snippet code I try so far didn't fit good with my code. I'll thank for your help.

• php
• javascript
• html
• ajax
• get

Share Improve this question Follow edited Feb 13, 2013 at 16:51 wizard asked Feb 13, 2013 at 16:28 wizardwizard 58322 gold badges1010 silver badges2626 bronze badges 6

• 2 Unfortunately, it is not simple. Learn about Ajax, and then use plex library methods to write it short. – Bergi Commented Feb 13, 2013 at 16:30
• Do you have some javascript so far ? – Dimitar Dimitrov Commented Feb 13, 2013 at 16:30
• @Danny AJAX, but not with great success... – wizard Commented Feb 13, 2013 at 16:31
• Make a jQuery Ajax call to a PHP script when you check each box and you'll get it that way. You can't do it with PHP alone sadly. Can you post your code? – crmpicco Commented Feb 13, 2013 at 16:32
• 1 I'll thank if someone can post a code snippet, I'm stuck in the middle of the project. – wizard Commented Feb 13, 2013 at 16:36

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

You want to use AJAX. Here is an example in jQuery without AJAX:

<td><input id="box1" class="box" name="box1" type="checkbox" value="1" checked /></td>
<td><input id="box2" class="box" name="box2" type="checkbox" value="2" checked /></td>
<td><input id="box3" class="box" name="box3" type="checkbox" value="3" checked /></td>

JavaScript:

$(document).ready(function() {
  $('.box').on('change', function(event) {
    var checkbox = $(event.target);
    var isChecked = $(checkbox).is(':checked');
    alert('checkbox ' + checkbox.attr('id') + ' is checked: ' + isChecked);
  });
});

Demo: http://jsbin./ipasud/1/

Now instead of doing an alert call, do a $.post to a backend URL that takes an id and a value of checked or unchecked. For example,

$.post('/submit-checkbox.php', {id: checkbox.attr('id'), value: isChecked});

And if we put that back into the code, it would look like this:

$(document).ready(function() {
  $('.box').on('change', function(event) {
    var checkbox = $(event.target);
    var isChecked = $(checkbox).is(':checked');
    $.post('/whatever-your-url-is.php', {id: checkbox.attr('id'), value: isChecked});
  });
});

You can use jQuery: http://jquery./

<script type="text/javascript">
    $(document).ready(function(){
        $('#box').click(function(){
           var selectedValue = $(this).value();
           submitValue(selectedValue);
        });

    });

    function submitValue(valueSelected){

       var request = $.ajax({
                 url: URL_OF_YOUR_PHP_FILE,
                 type: "POST",
                 dataType: 'json',
                     data: {value: valueSelected}
              });

        request.done(function(results) {
           //DO WHAT YOU WANT WITH YOUR RESULTS
        });
    }
</script>

Then in your PHP file you can get the value selected in $_POST['value'] and return what you want (in JSON format).