title: How to fix this code: Output gives an error
body: <p>I want to display the output from the user input.</p>
  
  <p>Hi Guys, I need to display the output from the user input but it seem the output give me an error.</p>
  
  <pre><code> &lt;label&gt;First Name: &lt;/label&gt;
      &lt;input id="fname"&gt;&lt;/input&gt;
      &lt;br&gt;
      &lt;button id="testing_lang" value="1" onclick="return chk()"&gt;
          Test Output
      &lt;/button&gt;
      &lt;br&gt;
      &lt;p id="query_result"&gt;Result will display here&lt;/p&gt;
  
  
     &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
     &lt;script&gt;
        function chk()
        {
          var firstName = document.getElementById('fname').value;
          $.ajax({
            type: 'post',
            url: 'test.php',
            data: firstName,
            cache:false,
            success: function(html)
                  {
                    $('#query_result').html(html);
  
                  }
           });
          return false;
        }
      &lt;/script&gt;
  </code></pre>
  
  <p>This is the code from my test.php I created</p>
  
  <pre><code>$firstName=$_POST['firstName'];
  echo "Response: " .$firstName;
  </code></pre>
  
  <p>This is the error of the output</p>
  
  <p>Notice: Undefined index: firstName in C:\xampp\htdocs\cops\pages\test.php on line 2
  Response:</p>