I cant get this form to submit correctly. If I have the button type as “submit” it always submits and if I use “button” as the type it never submits, the ajax call brings in the correct values, so even though the if statement follows the correct path but it doesnt seem to matter.
<script type="text/javascript">
$(document).ready(function(){
$("#submitButton").click(function(e) {
var un = $('#username').val();
$('#mike').html("");
$.ajax(
{
type: "POST",
url: "Utilities/CheckUsername.php",
data: "un="+ un,
success: function(data2)
{
if(data2=="Username Does Not Exist")
{
$("#login2").submit();
}
else
{
$('#mike').html(data2);
return false;
}
}
});
});
});
</script>
</head>
<body>
<form name="login" id="login2" method="post" action="dsds.html">
UserName<input type="text" name="username" id="username"value="">
<br/>
Password<input type="text" name="password" id="password" value="">
<br/>
Password Again<input type="text" name="passwordagain" id="passwordagain" value="">
<br/>
<input type="hidden" name="NewClass" id="NewClass" value="true">
<br/>
<input type="submit" name="no" id="submitButton" value="submit">
</form>
<span id = "mike"></span>
</body>
</html>
EDIT:
I added the return false here and it works, but why? I am just returning false from the click event
else
{
$('#mike').html(data2);
}
}
});
return false;
});
You just need to
return falsefrom your submit event handler. Thereturn falseyou have in there isn’t performed until after the asynch ajax call is finished.Alternatively you can use
e.preventDefault()which does the same thing.Both methods simply prevent the default behavior, i.e. submitting the form, from occurring.