title: Press Enter on input field to update database
body: <p>I have made database, I have connected to it, and I get data from it as input fields. When I edit any single input field and push ENTER, I want to update my database. I need to send data to database with AJAX.
  Here is my code:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>   &lt;script language="javascript" type="text/javascript"&gt;
      &lt;!-- 
      //Browser Support Code
      function ajaxFunction(){
          var ajaxRequest;  // The variable that makes Ajax possible!
  
          try{
              // Opera 8.0+, Firefox, Safari
              ajaxRequest = new XMLHttpRequest();
          }catch (e){
              // Internet Explorer Browsers
          try{
              ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          }catch (e) {
          try{
              ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
          }catch (e){
              // Something went wrong
              alert("Your browser broke!");
              return false;
             }
          }
      }
      // Create a function that will receive data 
      // sent from the server and will update
      // div section in the same page.
        ajaxRequest.onreadystatechange = function(){
         if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
         }
       }
       // Create variables to pass
       var id;
       var firstname ;
       var lastname ;
       var age ;
  
       var queryString = "?firstname=" + firstname ;
       queryString +=  "&amp;id=" + id + "&amp;lastname=" + lastname + "&amp;age=" + age;
       ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
       ajaxRequest.send(null); 
      }
      //--&gt;
      &lt;/script&gt;
      &lt;form name='myForm'&gt;
      &lt;input type='button' onclick='ajaxFunction()' value='Get Database Data'/&gt;
      &lt;/form&gt;
      &lt;div id='ajaxDiv' style="background-color:red"&gt;Your result will display here&lt;/div&gt; 
  </code></pre>
  
  <p>And here is <strong>ajax-example.php</strong></p>
  
  <pre><code>&lt;?php
  $dbhost = "localhost";
  $dbuser = "****";
  $dbpass = "****";
  $dbname = "ajax_example";
  //Connect to MySQL Server
  mysql_connect($dbhost, $dbuser, $dbpass);
  //Select Database
  mysql_select_db($dbname) or die(mysql_error());
  // Retrieve data from Query String
  $id = $_GET['id'];  
  $firstname = $_GET['firstname'];
  $lastname = $_GET['lastname'];
  $age = $_GET['age'];
  
  //build query
  $query = "SELECT * FROM ajax_example ";
  
  //Execute query
  $qry_result = mysql_query($query) or die(mysql_error());
  
  //Build Result String
  $display_string = "&lt;table&gt;";
  $display_string .= "&lt;tr&gt;";
  $display_string .= "&lt;th&gt;Id&lt;/th&gt;";
  $display_string .= "&lt;th&gt;Firstname&lt;/th&gt;";
  $display_string .= "&lt;th&gt;Lastname&lt;/th&gt;";
  $display_string .= "&lt;th&gt;Age&lt;/th&gt;";
  $display_string .= "&lt;/tr&gt;";
  
  // Insert a new row in the table for each person returned
  while($row = mysql_fetch_array($qry_result)){
  $display_string .= "&lt;tr&gt;";
  $display_string .= "&lt;td&gt;&lt;input type='text' name='id' value='".$row['id']."'&gt;&lt;/td&gt;";
  $display_string .= "&lt;td&gt;&lt;input type='text' name='firstname'    value='".$row['firstname']."'&gt;&lt;/td&gt;";
  $display_string .= "&lt;td&gt;&lt;input type='text' name='lastname' value='".$row['lastname']."'&gt;&lt;/td&gt;";
  $display_string .= "&lt;td&gt;&lt;input type='text' name='age' value='".$row['age']."'&gt; &lt;/td&gt;";
  $display_string .= "&lt;/tr&gt;";
  
  }
  echo "Query: " . $query . "&lt;br /&gt;";
  $display_string .= "&lt;/table&gt;";
  echo $display_string;
  ?&gt; 
  </code></pre>
  
  <p>I am beginner, so maybe my code isn't very nice. If I have some big mistakes please tell me. But now everything I want is working fine.</p>