title: How to submit form without reloading page, without jQuery?
body: <p>I have form as follows, it require to sent an action to my java Servlet to do an update to the database.</p>
  
  <p>How do I submit the form without the page get reloaded here? 
  Currently with <code>action="myServlet"</code> it keep direct me to a new page. And if I remove the action to myServlet, the input is not added to my database.</p>
  
  <pre><code>&lt;form name="detailsForm" method="post" action="myServlet" 
        onsubmit="return submitFormAjax()"&gt;
      name: &lt;input type="text" name="name" id="name"/&gt; &lt;br/&gt;
      &lt;input type="submit" name="add" value="Add" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In the view of my Java servlet, <code>request.getParameter</code> will look for the name and proceed to add it into my db.</p>
  
  <pre><code>@Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException
  {   
      if (request.getParameter("add") != null) {
          try {
              Table.insert(name);
          } catch (Exception ex) {
              ex.printStackTrace();
          }
      }
  }
  </code></pre>
  
  <p>In my JavaScript part, I have a <code>submitFormAjax</code> function</p>
  
  <pre><code>function submitFormAjax()
  {
      var xmlhttp;
      if (window.XMLHttpRequest) {
          // code for modern browsers
          xmlhttp = new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
  
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200)
              alert(xmlhttp.responseText); // Here is the response
          }
  
      var id = document.getElementById("name").innerHTML;
      xmlhttp.open("POST","/myServlet",true);
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlhttp.send("name=" + name); 
  }
  </code></pre>