How to submit a form in ajax .done() after event.preventDefault()?
Question
I am verifying my form using ajax, I'm just checking if username and password are right. If they are correct, I submit the form and turn to the welcome page else return an error message.
Everything goes well, but the form can't be submitted. I want the form to be submitted when data==1, using $("#login").submit(); but it doesn't work.
I keep searching, but I can't figure out what the problem is.
Any help will be greatly appreciated.
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>
5 answers
solution1
0 2016-07-06 05:05:48
It is not possible to restore a e.preventDefault() . You should only preventDefault in cases when you need to and let the original flow be as it is.
eg
function onClick(e) {
if (condition === false) {
e.preventDefault();
// do your stuff here
} else {
// let everything work as normal if condition is true
}
}
solution2
0 2016-07-06 05:14:11
Replace the submit event with a click event and then trigger submit
$("#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");
});
})
};
solution3
0 ACCPTED 2016-07-06 05:23:26
It is because whenever you are trying to submit your form it is getting blocked by event.preventDefault(); even after your response after the xhr request is matching your $("#login").submit() is getting blocked by again event.preventDefault() because it is again going to call $("#login").submit(function (event) {})) . So the solutions to your problem can be
Use a anchor button instead of submit button and call do same stuffs you are doing in form submit function.
<a href="javascript:void(0);" onclick="check()"> Submit </a>
In 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 to block event
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"); }); })};
solution4
0 2016-07-06 06:22:41
You can simply trigger the native submit event for the form—that will bypass the submit event handler bound by jQuery. In order to do that, you will have to access the DOM node: it is the first element in the array returned by the jQuery selector, ie $('#login')[0] .
To call the submit event to bypass jQuery, you can do this:
if (data==1) {
// Call native submit event
$('#login')[0].submit();
}
solution5
0 2016-07-06 06:37:48
I assume using return true and false is more better than event.preventDefault ! return false do form to not submit the same way preventDefault .Do submit form when only return true ,don't need to use $("#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");
});
})
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.