Question

我正在使用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>

Answer 1

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

e.g。

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

Answer 2

用click事件替换submit事件，然后触发提交

<Rectangle
   id="showHide"
   color="#451bc1"
   visible="false"
   width="500"
   height="100"
   translation="[150,600]" />

Answer 3

这是因为无论何时您尝试提交表单，都会被event.preventDefault（）阻止;即使在xhr请求匹配你的$（＆＃34;＃login＆＃34;）之后你的响应.admit（）再次被event.preventDefault（）阻止，因为它再次调用$（＆＃34; #login＆＃34;）。submit（function（event）{}））。所以问题的解决方案可以是

使用锚点按钮代替提交按钮，并调用您在表单提交功能中执行的相同操作。
```
<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");
  });



})

};

Answer 4

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

要调用submit事件以绕过jQuery，您可以这样做：

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

Answer 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");
      });       

    })
};

如何在event.preventDefault（）之后在ajax .done（）中提交表单？

5 个答案: