Форма все еще отправляется даже с предупреждениемDefault

Question

Я не знаю, что здесь не так. preventDefault должен прекратить отправку формы, но она по-прежнему продолжается. У меня есть вызов ajax, где он проверяет, действителен ли пользователь. Если нет, не допускайте отправки. В противном случае перейдите к логину и домашней странице.

Форма

<form id="signIn" method="post" action="processForms.php"> 
    <table cellspacing="10"> 
     <tr id="errorSignIn" hidden="hidden"> 
      <td class="centerItem errorMessage" colspan="3"> 
       Incorrect Username and/or Password 
      </td> 
     </tr> 
     <tr> 
      <td><input type="text" id="username" name="username" autocomplete="off" autofocus required placeholder="Username..."></td> 
      <td><input type="password" id="password" name="password" autocomplete="off" required placeholder="Password..."></td> 
      <td><input type="submit" name="processButton" class="signIn" value="Sign-in" ></td> 
     </tr> 
    </table> 
</form> 

Javascript

$('#signIn').submit (function (e) { 
    var username = $('#username').val(); 
    var password = $('#password').val(); 
    var dataString = "username=" + username + "&password=" + password; 
    $.ajax({ 
     type: "POST", 
     url: "ajaxCheck.php", 
     data: dataString, 
     cache: false, 
     success: function (result) { 
      if (!result) { 
       $('#errorSignIn').removeAttr('hidden'); 
       e.preventDefault(); 
       return false; 
      } 
     } 
    }); 
}); 

ajaxCheck.php

<?php 
$username = $_POST['username']; 
$password = $_POST['password']; 
$password = md5($password); 
$dbConnection = mysqli_connect('localhost','root','','onboard'); 
$query = "SELECT * FROM account WHERE username='$username' AND password='$password'"; 
$result = mysqli_query($dbConnection,$query); 
$count = mysqli_num_rows($result); 
if ($count == 1) { echo true; } 
else { echo false; } 

Answer 1

Потому что вы путти ng предотвратить значение по умолчанию внутри функции успеха ajax, которая является асинхронной. Вот почему он все еще подчиняется. Вы должны предотвратить это до вызова ajax, а не после завершения ajax.

$('#signIn').submit (function (e) { 
     e.preventDefault(); // put preventDefault here not inside the ajax success function 
     var username = $('#username').val(); 
     var password = $('#password').val(); 
     var dataString = "username=" + username + "&password=" + password; 
     $.ajax({ 
      type: "POST", 
      url: "ajaxCheck.php", 
      data: dataString, 
      cache: false, 
      success: function (result) { 
       if (!result) { 
        $('#errorSignIn').removeAttr('hidden'); 

        return false; 
       } 
      } 
     }); 
    }); 

Чтобы ответить на ваш следующий вопрос, вы можете сделать это.

var isFormChecked = false; // this variable will deremine if the ajax have finished what you wanted to do 
$('#signIn').submit (function (e) { 

// if ajax set this to true, it will not go here when it triggers. 
if(!isFormChecked){ 
    e.preventDefault(); // put preventDefault here not inside the ajax success function 
    var username = $('#username').val(); 
    var password = $('#password').val(); 
    var dataString = "username=" + username + "&password=" + password; 
    $.ajax({ 
     type: "POST", 
     url: "ajaxCheck.php", 
     data: dataString, 
     cache: false, 
     success: function (result) { 
      // if result is set to true 
      isFormChecked = result; 
      // then trigger the submit of the form 
      $('#signIn').trigger('submit'); 

     } 
    }); 
} else { 
    // form is submitted 
    isFormChecked = true; 
} 
}); 

Answer 2

Что вы можете сделать, это изменить тип кнопки от отправки до кнопки в вашем html.

И затем после нажатия вы подтверждаете, после чего с помощью jquery вы отправляете свою форму.

Вот как это будет делать свою работу:

<form id="signIn" method="post" action="processForms.php" > 
    <table cellspacing="10"> 
     <tr id="errorSignIn" hidden="hidden"> 
      <td class="centerItem errorMessage" colspan="3"> 
       Incorrect Username and/or Password 
      </td> 
     </tr> 
     <tr> 
      <td><input type="text" id="username" name="username" autocomplete="off" autofocus required placeholder="Username..."></td> 
      <td><input type="password" id="password" name="password" autocomplete="off" required placeholder="Password..."></td> 
      <td><input type="button" name="processButton" class="signIn" value="Sign-in" ></td> 
     </tr> 
    </table> 
</form> 



$('#processButton').click (function (e) { 
    var username = $('#username').val(); 
    var password = $('#password').val(); 
    var dataString = "username=" + username + "&password=" + password; 
    $.ajax({ 
     type: "POST", 
     url: "ajaxCheck.php", 
     data: dataString, 
     cache: false, 
     success: function (result) { 
      if (!result) { 
       $('#errorSignIn').removeAttr('hidden'); 
       return false; 
      } 
      else { $("#signIn").submit(); } 
     } 
    }); 
});