mulder mulder - 4 months ago 39
Ajax Question

How to submit a form in ajax .done() after event.preventDefault()?

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>




Answer

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

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


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

    };

Comments