title: Javascript/AJAX ReferenceError: x is not defined
body: <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(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 &amp;&amp; xmlhttp.status==200) {
                      responseArray = eval("(" + xmlhttp.responseText + ")");
                      document.getElementById("test").innerHTML = responseArray;
                  }
              }
  
              xmlhttp.open("GET", "checkbox.php?step="+step, true);
              xmlhttp.send();
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;?php       
      $step = $_GET["step"];
      echo "[" . $step . "]";
  ?&gt;
  </code></pre>