How do I submit a form after JQuery Ajax validation? - php

Question

I can't get the .submit() jquery function to work I've boiled down everything in my code to:
<form action="/server/addserver.php" method="post" accept-charset="utf-8" id="mainform"><input type="text" name="test" value="" /><input type="submit" name="submit" value="Submit" id="submitbutton" /></form>
<script type="text/javascript">
$("#submitbutton").click(
function(){
$("#mainform").submit();
return false;
});
</script>
Seems to me this should 1 - stop the default behavior of the button then 2 - manually submit the form.
If i swap out .submit(); with .hide(); that works. Is this not the preferred way to manually submit a form after first running some ajax validation ?
Thanks

Answer 1

You can do:
$(function () {
$('#mainform').submit(function () {
if (isFormValid()) { // do your validation
return true;
}
return false;
});
});
This will run when the form is submitted (just use the normal <input type="submit" /> button). Returning false here will prevent the page from posting.
If you wanted to bind the event to your button, try it like this:
$(function () {
$('#submitbutton').click(function () {
if (isFormValid()) { // do your validation
$('#mainform').submit();
}
return false;
});
});

Answer 2

First, there are a couple things I think you should be aware of:
Anytime you want to bind an event to a DOM element right off the bat like that, you should make sure the page has fully loaded. If in doubt, wrap your code inside $(document).ready(function() { /* code to execute after page load */ });.
Also, the .trigger("submit") method doesn't work if the name attribute of the input[type="submit"] element is set to the value "submit". Since .submit() called with no arguments is a shortcut for .trigger('submit'), then anytime you call JQuery's .submit() method on an element, you would want to make sure and assign the input's name attribut something other than "submit".
Now, to answer your questions; first about whether returning false is the preferred way to manually submit a form, the answer is usually no. The reason is that returning false does three things, and you usually don't want to do all of them. It prevents the default browser behavior for the event, it also stops the event from bubbling, and, it immediately returns, exiting the function. Usually, you probably just want to either event.preventDefault() or event.stopPropagation()… or even unbind the event altogether. In this case though, in my opinion, returning false rather than calling the appropriate evening methods seems to muddle the intention of your code.
If you also need to prevent the default browser action on the submit event, you can use JQuery's alternate trigger method:
$('#mainform').triggerHandler('submit');
.
Though, the validator method itself should probably be where you call form.submit() in the case that there are no errors. It should also be where you handle form submission, since it is the gatekeeper, so to speak.
All in all, if you're going to the Validator plugin, you should follow it's own conventions. Ensure the form does a default submit by adding name="submit" to your submit button and then remove all the JQuery code you have and replace it with this example from the Validator documentation:
$("#mainform").validate({
submitHandler: function(form) {
form.submit(); // Don't use a JQuery selector here, just "form"
}
});
That should allow the plugin to operate as expected. The last step would be to add your validation rules, of course. I hope that helps. If you still have trouble with eventing, try using JQuery's Event object methods for debugging on the console.