javascript - preventDefault() won't work with form.submit() -

i'm trying login form either close lightbox, or change text of errorbox depending on whether or not login attempt success. i'm not sure, think has

 onclick="formhash(this.form, this.form.password);" 

which js function hashes password, continues form submit. ends with

    form.submit(); 

here's code:

html:

<form action="includes/process_login.php" method="post" name="login_form">            email: <input class="searchform" type="text" name="email" size="20"/><br />     password: <input class="searchform" type="password"                         name="password" id="password" size="20"/><br />             <input type="button"  class="searchform"                    value="submit" size="40"  style="height:45px; width:90px"                     onclick="formhash(this.form, this.form.password);" />             <input type="text" id="errorbox" style="height:45px; width:180px" value=""><br> </form> 

js:

<script>   !(function($){    $(function() {          $('form[name="login_form"]').on('submit', function(event){              event.preventdefault();//don't reload page             $.post('includes/process_login.php', $(this).serialize(), function(data){               //data json object contans reponse               data = $.parsejson(data);               $("fade").fadeout();               $("light").fadeout();             },             function(data){//error callback                   data = $.parsejson(data);               if(data.forbidden){                   $("#errorbox").html("error!");               }               else if(data.error){                 $("#errorbox").html("invalid request!");               }             });           });           return false;     }); })(window.jquery);     </script> 

php:

<?php include_once 'db_connect.php'; include_once 'functions.php';  sec_session_start(); // our custom secure way of starting php session.  $response = array(); if (isset($_post['email'], $_post['p'])) {   $email = $_post['email'];   $password = $_post['p'];        if (login($email, $password, $mysqli) == true) {           http_response_code(200);//http ok, requires php 5.4           $response['success'] = true;      } else {       // login failed        $response['error'] = true;       http_response_code(401);//http forbidden   }   } else {      // correct post variables not sent page.        $response['error'] = true;       http_response_code(400);//http bad request    }  echo json_encode($response); 

when log in, preventdefault() doesn't work. opens process_login.php in new page , displays "{"success":true}" on blank page. suggestions? (keeping in mind needs secure possible)

you try moving single handler call. changing type="button" type="submit" on form.

<form action="includes/process_login.php" method="post" name="login_form">        email: <input class="searchform" type="text" name="email" size="20"/><br /> password: <input class="searchform" type="password"                         name="password" id="password" size="20"/><br />          <input type="submit"  class="searchform" value="submit" size="40"  style="height:45px; width:90px"                     />         <input type="text" id="errorbox" style="height:45px; width:180px" value=""><br> 

then move formhash function submit function

!(function($){ $(function() {      $('form[name="login_form"]').on('submit', function(event){          event.preventdefault();//don't reload page          formhash(var1, var2);          $.post('includes/process_login.php', $(this).serialize(), function(data){           //data json object contans reponse           data = $.parsejson(data);           $("fade").fadeout();           $("light").fadeout();         }, ...//the rest of code