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

我正在使用ajax验证我的表单，我只是检查用户名和密码是否正确。如果他们是正确的，我提交表格并转到欢迎页面，否则返回错误消息。如何在event.preventDefault（）之后提交ajax .done（）中的表单？

一切顺利，但表单无法提交。我希望表单在数据== 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>

来源

2016-07-06 mulder

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

这是因为每当你尝试提交您的形式，它是越来越阻止event.preventDefault（）;即使在xhr请求后的响应匹配你的$（“＃login”）。submit（）再次被event.preventDefault（）阻塞，因为它再次调用$（“＃login”）。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"); 
    }); 


}

Check Condition来阻止事件

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



})

};

来源

2016-07-06 05:23:26

谢谢。解决方案1是我想要的。有用。 – mulder

@mulder如果解决方案有效，您可以投票解决方案？ –

我没有超过15的声望，我的投票不会改变帖子分数。 – mulder

这是不可能恢复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 
    } 
}

来源

2016-07-06 05:05:48 activatedgeek

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

$("#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"); 
     }); 



    }) 
};

来源

2016-07-06 05:14:11 madalinivascu

你是对的。我明白你的意思。我编辑了我的代码，现在它工作。 – mulder

不要忘记检查绿色按钮接受答案：p – madalinivascu

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

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

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

来源

2016-07-06 06:22:41 Terry

我认为使用return true and false比event.preventDefault越多越好！返回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"); 
     });  

    }) 
};

来源

2016-07-06 06:37:48

它不起作用。它总是提交表单甚至是错误的用户名和密码。似乎返回true或false在ajax中不起作用。 – mulder

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

回答

相关问题