title: Autocompleting textboxes with AJAX using variables from a PHP file
body: <p>I am doing a project where I need to make sure that my form instantly autofills 2 textboxes based on input from the first textbox. Right now I am just testing. I can't use database entries to populate my form, only PHP variables. My logic needs to be like this: user types in a specific 10 digit number into a textbox on my form (specified in a PHP file), then the other two textboxes get autofilled with specific entries after an AJAX call to that PHP file. This is definitely one of the more complex tasks that I've encountered so far (noob). My code doesn't work, so I would really appreciate any help with getting it to function properly.</p>
  
  <p>HTML is like this:</p>
  
  <pre><code>&lt;!--load scripts, libraries, etc.--&gt;
  &lt;form method="GET"&gt;
  Number: &lt;input type="text" name="num" id="num"&gt;
  First Name: &lt;input type="text" name="first" id="first"&gt;
  Last Name: &lt;input tupe="text" name"last" id="last"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;?php
  
  $num=$_GET["num"];
  $first=$_GET["first"];
  $last=$_GET["last"];
  
  if ($num=="0123456789")
  {
          $fill = array(
          'firstname' =&gt; $first["John"],
          'lastname' =&gt; $last["Smith"],
           );
      echo json_encode($fill);
  }
  else
  {
      echo "Bad input.";
  }
  
  ?&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function () {
    $("#num").keyup(function () {
      var el = $(this);
  
       if (el.val().length === 10) {
          $.ajax({
              url: "http://localhost/test.php",
              cache: false,
              dataType: "json",
              type: "GET",
              data: "npi=" + el.val(),
              success: function (result) {
                  $("#first").val(result.firstname);
                  $("#last").val(result.lastname);
              }
          });
        }
     });
  });
  </code></pre>