title: Why does AJAX refresh the page?
body: <p>I have an html form which is used for logging in to my website. The only problem is that it refreshes the page, which I don't want. So I am trying to use AJAX instead. And it doesn't work. The page still gets refreshed and I'm not sure that the data I'm posting gets sent through properly. My code is below. What am I doing wrong?</p>
  
  <pre><code> &lt;?php if (login_check($mysqli) == false) :  ?&gt;
       &lt;div id="loginform" data-iziModal-group="grupo1"&gt;
           &lt;button data-iziModal-close class="icon-close"&gt;x&lt;/button&gt;  &lt;!--watch out here - JSFormat formatted the izimodal spec to have spaces in it and the button no longer worked.--&gt;
           &lt;header&gt;
           &lt;a href="" id="signin"&gt;Sign in&lt;/a&gt;
           &lt;/header&gt;
           &lt;section&gt;
           &lt;form name="login_form" id="login_form"&gt;
           &lt;input type="text" placeholder="Email" name="email" class="login_email" id="login_email"&gt;
           &lt;input id="password" type="password" placeholder="Password" name="password" class="login_password"&gt;
           &lt;footer&gt;
           &lt;button data-iziModal-close&gt;Cancel&lt;/button&gt;
           &lt;button class="submit" data-iziModal-close onclick="hashandlogin(this.form, this.form.password);"&gt;Log in&lt;/button&gt;
           &lt;p style="text-align: center; color: #444; font-size: 16px; font-family: Lato; padding-top: 70px; font-weight: 500;"&gt;
          Don't have an account? &lt;a style="font-size: 16px; font-weight: 500; font-family: Lato;" href="register.php"&gt;Register here.&lt;/a&gt;&lt;/p&gt;
                          &lt;/footer&gt;
                          &lt;/form&gt;
                          &lt;/section&gt;
                      &lt;/div&gt;
            &lt;script type="text/javascript"&gt;
  
            document.getElementById("login_form").addEventListener("submit", function (event) {
                event.preventDefault()
                console.log("defaultprevented");
            });
  
      function hashandlogin(a, b) {
           formhash(a, b);
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function () {
              if (this.readyState == 4 &amp;&amp; this.status == 200) {
                  console.log(this.responseText);
              }
          };
          xmlhttp.open("GET", "includes/process_login.php?email=" +document.getElementById("login_email").value + "&amp;p="+document.getElementById("hashedp").value, true);
          xmlhttp.send(); 
      }
  
      &lt;/script&gt;   
  
  function formhash(a, b) {
  var c = document.createElement("input");
  a.appendChild(c), c.name = "p", c.type = "hidden", c.id="hashedp", c.value = hex_sha512(b.value), b.value = "", a.submit()
  </code></pre>
  
  <p>}</p>
  
  <p>includes/process_login.php file:</p>
  
  <pre><code>&lt;?php
  
  include_once 'db_connect.php';
  include_once 'functions.php';
  
  sec_session_start(); // Our custom secure way of starting a PHP session.
  
  if (isset($_POST['email'], $_POST['p'])) {
      $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
      $password = $_POST['p']; // The hashed password.
  
      if (login($email, $password, $mysqli) == true) {
          $_SESSION["email"] = $email;
          saveLogin($_SESSION['user_id'],$mysqli);
          echo ("something");
          // Login success
        //  header("Location: ../account.php");  I don't want the account page shown just cos user has logged in. But what should go here? If nothing or index.php then get a blank page with process_login.php as the address.
          exit();
      } else {
          // Login failed
    //      header('Location: ../login.php?error=1');
    echo ("nothing");
          exit();
      }
  } else {
      // The correct POST variables were not sent to this page.
      echo ("nothing at all");
    //  header('Location: ../error.php?err=Could not process login');
      exit();
  }
  </code></pre>