表格仍然提交甚至与preventDefault

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

因为你是丘比特在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(); } 
     } 
    }); 
});