title: HTML In Page reverting to original HTML after innerHTML changed with AJAX
body: <p>Maybe this is an incompatibility between using an HTML form and AJAX, but I've used these methods separately no problem.  I'm trying to set the input from a form field to a JS variable, execute AJAX to confirm the password on the client side in a php script, then on success change the html on the original page.  the AJAX call works fine, but after it switches the HTML in my div, the page reverts back to it's original state immediately after (i.e. it shows the form again and not the resulting HTML from the function).</p>
  
  <p>Is this an issue where I can't use this type of form and then remain in the same page without it refreshing?</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var pw;
      var ptest;
  
      function pass() {
          pw = document.getElementById("pwd").value;
  
          alert(pw);
          $.ajax({
              url: "login.php",
              type: "POST",
              data: { password : pw
              },
              dataType: 'text',
              success: function (data) {
  
                  document.getElementById("stuff").innerHTML = data;
              },
              error: function () { document.getElementById("stuff").innerHTML = 'fail'; }
          });
                  alert("xx");
      }
  &lt;/script&gt;
  
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;br&gt;&lt;br&gt;
  &lt;div id="stuff"&gt; 
  &lt;form onsubmit="pass()" autocomplete="off"&gt;
      &lt;label&gt;Password: &lt;input type="password" id="pwd"&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" /&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>