Question

I have a jQuery function that takes the value from a PHP-generated check box and sends it over AJAX. The value is always a single word with nothing but letters by the way. Below is the script.

<script type="text/javascript">
    $(document).ready(function() {
        $("input:checkbox").on("click", function () {
            step = this.value;
            //document.getElementById("test").innerHTML = step;
            responseArray = [];

            xmlhttp=new XMLHttpRequest();
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    responseArray = eval("(" + xmlhttp.responseText + ")");
                    document.getElementById("test").innerHTML = responseArray;
                }
            }

            xmlhttp.open("GET", "checkbox.php?step="+step, true);
            xmlhttp.send();
        });
    });
</script>

The above code results in the “ReferenceError: [this.value] is not defined”. [this.value] is the actual value though which changes based on the box that is checked. If you notice the 5th line in the above code, when I don’t comment that line out it displays the correct value in “test” for the step variable, so it’s something after that. Below is the checkbox.php file completely simplified down to basically nothing and it still causes the error.

<?php       
    $step = $_GET["step"];
    echo "[" . $step . "]";
?>

Answer 1

As I can see your using Jquery, you should use JQuery’s AJAX object. It simplifies the request a lot:

$.ajax({
  url: 'checkbox.php?step=',
  success: function(data) {
    alert(data);
  }
});

http://api.jquery.com/jQuery.ajax/

Now your problem seems to be that you’re not getting the value of the checkbox through properly. Checkboxes are either on or off. Here’s how to get the various parameters:

$(document).ready(function () {
    $("input:checkbox").on("click", function () {
        var checkboxID = $(this).attr("ID");        // Returns the ID of the checkbox
        var isChecked = $(this).is(':checked');     // Returns true or false

        alert($(this).attr("ID") + " is " + isChecked);
    });
});

So your final code might look something like:

$(document).ready(function () {
    $("input:checkbox").on("click", function () {
        var checkboxID = $(this).attr("ID");        // Returns the ID of the checkbox
        var isChecked = $(this).is(':checked');     // Returns true or false

        $.ajax({
           url: 'checkbox.php?step=' + isChecked ,
           success: function(data) {
             alert(data);
           }
         });
    });
});

(untested code) which would send a request to the url checkbox.php?step=true

And hello from 2+2 😀