event.preventDefault() 之后如何在 ajax .done() 中提交表单？答案

【问题标题】：How to submit a form in ajax .done() after event.preventDefault()?event.preventDefault() 之后如何在 ajax .done() 中提交表单？
【发布时间】：2016-07-06 05:00:52
【问题描述】：

我正在使用 ajax 验证我的表单，我只是在检查用户名和密码是否正确。如果正确，我会提交表单并转到欢迎页面，否则会返回错误消息。

一切顺利，但表单无法提交。我希望在 data==1 时提交表单，使用 $("#login").submit();但它不起作用。

我一直在寻找，但我无法弄清楚问题所在。

任何帮助将不胜感激。

function check() {
  
    $("#login").submit(function (event) {
      
      event.preventDefault();
      if($("#username").val()=="")
      {
        $("#usernamenull").html("username required <br />");
        return false;
      }
      else if($("#password").val()=="")
      {
        $("#passwordnull").html("password required <br />");
        return false;
      } 
      
      
      var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()});
      
      xhra.done(function (data) {
        if (data==0) {
          $("#message").html("username or password incorrect.<br />");
        }
        else if (data==1) {
          $("#message").html("good.<br />");
          $("#login").submit();//I want the form to be submited here,but doesn't work.
        }
      });
      
      xhra.fail(function () {
        alert("oops : "+xhra.status+" "+xhra.statusText+".\n");
      });

       
     
    })
};

<!DOCTYPE HTML>
<html>

<head>
  <script src="jquery-3.0.0.js"></script>
  <script src="test.js"></script>
</head>

<body>
  <form name="login" id="login" action="welcome.php" method="post" >  
    username:       
    <br />     
    <input type="text" name="username" id="username">
    <br />
    <span id="usernamenull" style="color:red"></span>
    <br />
    password:
    <br />
    <input type="password" name="password" id="password" />
    <br />
    <span id="passwordnull" style="color:red"></span>
    <br />
    <br />
    <input type="submit" name="mysubmit" id="mysubmit" value="login" onclick="check()" />
    <br />
    <br />
    <span id="message"style="color:red"></span>
    <br />
    </form>
  
</body>

</html>

【问题讨论】：

@Marcus H 谢谢。我不是以英语为母语的人。我希望你们知道我在说什么。

标签： javascript jquery ajax forms

【解决方案1】：

这是因为每当您尝试提交表单时，它都会被 event.preventDefault(); 阻止。即使在 xhr 请求与您的响应匹配后，您的 $("#login").submit() 也再次被 event.preventDefault() 阻止，因为它将再次调用 $("#login").submit(function （事件） {}））。所以你的问题的解决方案可以是

使用锚按钮而不是提交按钮并调用与表单提交功能相同的操作。
```
<a href="javascript:void(0);" onclick="check()"> Submit </a>
```

在 JavaScript 中

function check(){


  if($("#username").val()=="")
  {
    $("#usernamenull").html("username required <br />");
    return false;
  }
  else if($("#password").val()=="")
  {
    $("#passwordnull").html("password required <br />");
    return false;
  } 


  var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()});

  xhra.done(function (data) {
    if (data==0) {
      $("#message").html("username or password incorrect.<br />");
    }
    else if (data==1) {
      $("#message").html("good.<br />");
      $("#login").submit();//I want the form to be submited here,but doesn't work.
    }
  });

  xhra.fail(function () {
    alert("oops : "+xhra.status+" "+xhra.statusText+".\n");
  });


}

检查条件以阻止事件

function check() {



$("#login").submit(function (event) {


  if($("#username").val()=="")
  {
    event.preventDefault();
    $("#usernamenull").html("username required <br />");
    return false;
  }
  else if($("#password").val()=="")
  {
    event.preventDefault();
    $("#passwordnull").html("password required <br />");
    return false;
  } 


  var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()});

  xhra.done(function (data) {
    if (data==0) {
      event.preventDefault();
      $("#message").html("username or password incorrect.<br />");
    }
    else if (data==1) {
      $("#message").html("good.<br />");
      $("#login").submit();//I want the form to be submited here,but doesn't work.
    }
  });

  xhra.fail(function () {
    event.preventDefault();
    alert("oops : "+xhra.status+" "+xhra.statusText+".\n");
  });



})

};

【讨论】：

@mulder 如果解决方案有效，您可以投票支持解决方案吗？
我的声望不超过15，我的投票不会改变帖子分数。

【解决方案2】：

无法恢复e.preventDefault()。您应该只在需要的情况下 preventDefault 并让原始流程保持原样。

例如

function onClick(e) {
  if (condition === false) {
    e.preventDefault();
    // do your stuff here
  } else {
    // let everything work as normal if condition is true
  }
}

【讨论】：

【解决方案3】：

将提交事件替换为点击事件，然后触发提交

 $("#login").click(function (event) {

      event.preventDefault();
      if($("#username").val()=="")
      {
        $("#usernamenull").html("username required <br />");
        return false;
      }
      else if($("#password").val()=="")
      {
        $("#passwordnull").html("password required <br />");
        return false;
      } 


      var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()});

      xhra.done(function (data) {
        if (data==0) {
          $("#message").html("username or password incorrect.<br />");
        }
        else if (data==1) {
          $("#message").html("good.<br />");
          $("#login").submit();
        }
      });

      xhra.fail(function () {
        alert("oops : "+xhra.status+" "+xhra.statusText+".\n");
      });



    })
};

【讨论】：

你是对的。我知道你的意思。我编辑了我的代码，它现在可以工作了。
别忘了勾选绿色按钮以接受答案：p

【解决方案4】：

您可以简单地触发表单的本机提交事件——这将绕过由 jQuery 绑定的提交事件处理程序。为此，您必须访问 DOM 节点：它是 jQuery 选择器返回的数组中的第一个元素，即$('#login')[0]。

要调用提交事件绕过jQuery，你可以这样做：

if (data==1) {
    // Call native submit event
    $('#login')[0].submit();
}

【讨论】：

【解决方案5】：

我假设使用return true and false 比event.preventDefault 更好！ return false 做表单不提交同样的方式preventDefault。只返回true时做表单提交，不需要使用$("#login").submit()

function check() {

    $("#login").submit(function (event) {          
      //event.preventDefault(); [use instead return true and false]
      if($("#username").val()=="")
      {
        $("#usernamenull").html("username required <br />");
        return false;
      }
      else if($("#password").val()=="")
      {
        $("#passwordnull").html("password required <br />");
        return false;
      }           

      var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()});

      xhra.done(function (data) {
        if (data==0) {
          $("#message").html("username or password incorrect.<br />");
          return false;
        }
        else if (data==1) {
          $("#message").html("good.<br />");
          return true;
        }
      });

      xhra.fail(function () {
        alert("oops : "+xhra.status+" "+xhra.statusText+".\n");
      });       

    })
};

【讨论】：

它不起作用。即使用户名和密码错误，它也总是提交表单。似乎 return true 或 false 在 ajax 中不起作用。