Reputation: 2503
I have a login and registration popup which is shown on aspx page. I have 2 submit button on this popup one for login and another for registration.
On click of registration button I am checking email availability using jquery ajax and if email is available I want to submit the page to server but problem is that when user clicks on registration button it does not wait for ajax result.
$('#btnRegister').on('click', function(e) {
if (!isValid()) {
e.preventDefault();
return false;
} else {
if (checkEmailAvailability($('#txtEmailId').val())) {
return true;
} else {
e.preventDefault();
return false;
}
}
});
Upvotes: 0
Views: 69
Reputation: 56688
That is because ajax requests are async. So the page proceeds with other activities (like submitting the form) and handles the results of the request whenever it arrives.
You might want to disable the submit anyway before sending the request, and then in case success submit the form manually:
$('#btnRegister').on('click', function(e) {
e.preventDefault();
if (isValid()) {
var email = $('#txtEmailId').val();
checkEmailAvailability(email, function() {
$("form_selector_here").submit();
});
}
});
And in you would need to instroduce a callback in checkEmailAvailability
:
function checkEmailAvailability(email, callback) {
$.ajax({
//details of the ajax call
success: callback
})
}
Upvotes: 1
Reputation: 2989
Instead of doing this, why not make a Custom Validator target the Email Control on your page. Have the Custom Validator call a WebApi or Control Method that returns true or false.
This way your page being submitted is still going to be handled properly by ASP.NET Form submit and the control validators will take care of this problem for you.
Also having each validator for each control will provide you with a much more structured page for maintainability and follow ASP.NET Web Forms conventions.
Upvotes: 0