Get checkbox value without page refresh

Question

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.

Unfortunately, it is not simple. Learn about Ajax, and then use complex library methods to write it *short*. — Bergi, Feb 13 '13 at 16:30
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, Feb 13 '13 at 16:32
I'll thank if someone can post a code snippet, I'm stuck in the middle of the project. — wizard, Feb 13 '13 at 16:36
So I posted how to do this from the client side with jQuery. You probably want to read some other posts here on how to handle the backend in PHP (and whatever framework you're using if you are using a framework). — Cymen, Feb 13 '13 at 16:59

Cymen · Answer 1 · 2013-02-14T18:04:46.900

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.com/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});
  });
});

edited Feb 14 '13 at 18:04

answered Feb 13 '13 at 16:40

Cymen

14,079
4
52
72

Ok, I get an alert when I check/uncheck. But, when I insert the $.post statement I get a blank screen? Where do i suppose to put it in my code? And where php "get" statement come into place? – wizard Feb 14 '13 at 17:46
1

Well what is on the PHP side? Are you listening for a POST or a GET to submit to when the checkbox is changed? I updated it with an example but you need to `$.post` or `$.get` to whatever URL (endpoint) you are going to listen to on the server for this data. Using the POST instead of GET to submit the data is more correct (you'll have less issues doing it that way). – Cymen Feb 14 '13 at 18:04
– wizard Feb 14 '13 at 18:11
I get nothing... (get.js = your function above). – wizard Feb 14 '13 at 18:12
So you need to go look at how AJAX works with PHP and jQuery. It is kind of complicated. Here is one example: http://stackoverflow.com/questions/5004233/jquery-ajax-post-example But you can google for more. – Cymen Feb 14 '13 at 19:55

score 0 · Answer 2 · edited Jun 14 '16 at 00:53

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

<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).

Get checkbox value without page refresh

2 Answers2

Linked