title: why is ajax and php script not posting back into original form
body: <p>I have this form and I'm using ajax to send data to a simple php script (just trouble shooting with simple php script) but it is not posting back data to original html form... here are the two scripts
  contact.html</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;Contact Us&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="bootstrap.min.css" rel="stylesheet"&gt;
      &lt;!-- stylesheet for this form --&gt;
      &lt;link href="contact-stylesheet.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;script type="text/javascript"&gt;
          function validateForm()
          {
              var message = "";
              var letters = /^[A-Za-z]+$/;    
              //do validation
              var jname = document.forms["myForm"]["name"].value;
              var jemail = document.forms["myForm"]["email"].value;
              var jsubject = document.forms["myForm"]["subject"].value;
              var jtext = document.forms["myForm"]["text"].value;
              var joutputMsg = "";
  
              //checking for empty fields
              if (jname == null || jname == "") {             
                  message += "name field empty!\n";
              }               
              if (jname != "" &amp;&amp; !jname.match(letters)) {
                  message += "Invalid name: only letters allowed!\n";
              }
              if (jemail == null || jemail == "") {
                  message += "email field is empty!\n";
              }
              if (jsubject == null || jsubject == "") {
                  message += "Subject field is empty!\n";
              }
              if (jtext == null || jtext == "") {
                  message += "Text field is empty!\n";
              }           
  
              if (message != "" ) {
                  alert(message);
                  return false;
              }
  
              //send data to php form---------------------&gt;
              // create the XMLHttpRequest object, according browser          
              // create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
              var xmlHttp = null;
  
              if(window.XMLHttpRequest) {     // for Forefox, IE7+, Opera, Safari, ...
              xmlHttp = new XMLHttpRequest();
              }
              else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
  
              // sends data to a php file, via POST, and displays the received answer         
              // create pairs index=value with data that must be sent to server
              var parameters="name="+jname+"&amp;email="+jemail;
  
              request.open("POST", "contact.php", true);          // set the request
  
              // adds  a header to tell the PHP script to recognize the data as is sent via POST
              request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
              request.send(the_data);     // calls the send() method with datas as parameter
  
              // Check request status
              // If the response is received completely, will be transferred to the HTML tag with tagID
              request.onreadystatechange = function() {
                  if (request.readyState == 4) {
                    document.getElementById("output-data").innerHTML = request.responseText;
                  }
              }           
              return false;
          }       
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
        &lt;div class="row"&gt;
            &lt;div class="hero-unit" style="padding:20px 100px"&gt;
              &lt;h1&gt;Contact Us&lt;/h1&gt;
              &lt;p&gt;aldkfjasdkfjaskdfasdfkasdkfjadsfjsdkfjaskfjasdkfjasjfaskdfjsdkfjsksdsdkjsd&lt;/p&gt;       
          &lt;/div&gt;
            &lt;div class="col-sm-6"&gt;
              &lt;div class="my-form"&gt;
                  &lt;form class="form-horizontal" name="myForm" action="contact.php" onsubmit="return validateForm(event)" method="post"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Name:&lt;/label&gt;
              &lt;div class="col-sm-8"&gt;
                &lt;input type="name" name="name" class="form-control" id="inputEmail3" placeholder="Name"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Email:&lt;/label&gt;
              &lt;div class="col-sm-8"&gt;
                &lt;input type="email" name="email" class="form-control" id="inputPassword3" placeholder="Email"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Subject:&lt;/label&gt;
              &lt;div class="col-sm-8"&gt;
                &lt;input type="text" name="subject" class="form-control" placeholder="Subject"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
                &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Text:&lt;/label&gt;
                &lt;div class="col-sm-8"&gt;
                  &lt;textarea name="text" class="form-control" rows="7" placeholder="Text"&gt;&lt;/textarea&gt;
                &lt;/div&gt;    
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                &lt;button type="submit" class="btn btn-default"&gt;Send&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;    
              &lt;/div&gt; 
          &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-6"&gt;
                &lt;div style="width:500px;heigth:350px;border:solid 1px brown"&gt;
                  &lt;h1&gt;GOOGLE MAP HERE!&lt;/h1&gt;
                &lt;/div&gt;
               &lt;!-- &lt;img sytle="padding:0px 20px" src="https://maps.googleapis.com/maps/api/staticmap?center=Miami+Downtown,Miami,FL&amp;zoom=13&amp;size=500x350&amp;maptype=roadmap&amp;markers=color:red%7CMiami+Downtown,Miami,FL"&gt;                     --&gt;
            &lt;/div&gt;      
        &lt;/div&gt;
        &lt;div class="col-sm-6" id="msg-result" style="padding:10px 140px"&gt;
                &lt;p id="output-data"&gt;
  
                &lt;/p&gt;
              &lt;!-- display form result message here! --&gt;
        &lt;/div&gt;
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>contact.php </p>
  
  <pre><code>&lt;?php
  
      if (isset($_POST['name'])) {
          $name = $_POST['name'];                  
  
      }
  
      if (isset($_POST['email'])) {
          $email = $_POST['email'];
      }
  
      echo "Name: " . $name . "&lt;br&gt; Email: " . $email;    
  ?&gt;
  </code></pre>