How to use ajax post method inside another function? - php

Question

I am trying to submit a form using ajax post.Before that i am checking that all the form data are correct, if so the form will be submitted.Can any body tell me why the form is not submitting ?
HTML:
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="password">Password</label>
<input type="password" name="uPassword" id="uPassword" value="<?=$uPassword;?>" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="password">Verify Password</label>
<input type="password" name="uVPassword" id="uVPassword" value="<?=$uVPassword;?>" />
</p>
<p class="submit">
<button id="registerButton" type="submit">Register</button>
</p>
</fieldset>
</form>
jQuery code :
$('#registerButton').bind('click', function () {
if ($('#formElem').data('errors')) {
alert('Please correct the errors in the Form');
return false;
} else {
$(function () {
$("#formElem").on("submit", function (event) {
event.preventDefault();
$.ajax({
url: "somefile.php",
type: "post",
data: $(this).serialize(),
success: function (d) {
alert(d);
}
});
});
}); ///end of func
return true;
}
});

Answer 1

Why do you have event.preventDefault(); in the beginning of your submit function? It seems that that's the problem.

Answer 2

You don't need the click handler, in the submit handler you can check for the validity
jQuery(function ($) {
$("#formElem").on("submit", function (event) {
event.preventDefault();
if ($(this).data('errors')) {
return;
}
$.ajax({
url: "somefile.php",
type: "post",
data: $(this).serialize(),
success: function (d) {
alert(d);
}
});
});
})

Answer 3

You can call ajax on click of button. For any error it will go in to the if condition otherwise submit the form successfully..
$('#registerButton').bind('click', function () {
if ($('#formElem').data('errors')) {
alert('Please correct the errors in the Form');
return false;
}
$.ajax({
url: "somefile.php",
type: "post",
data: $(this).serialize(),
success: function (d) {
alert(d);
}
});
return true;
}); ///end of func

Answer 4

$(function() { /*code here */ }); That execute the function when the DOM is ready to be used. This means that this function is assigned to the event onDocumentReady that occurs only once (when the page loads), and you assign a function after this event, so never execute.
It's the same with this function $("#formElem").on("submit", function (event) {}); Do not tell her immediately but do you create a handle to the event onSubbmit.