Jquery Form Submit

Question

I am working with jQuery and after looking over other questions, I cannot seem to find an answer to the problem I have. I am trying to validate a form and submit it in one action. It work's fine it I use a submit button, but it I try and call the trigger from another function it fails.

jQuery code:

$(document).ready(function(){
 $('#cmdSave').click(function (){
 if ($('#age').val() != $('#agechk').val()) {
 //Do something
 }
 else {
 //Set form varaible
 $('#frmactn').val('Save');
 //Call form submit
 $('#frmPrflDtls').submit();
 }
 });
 $('#frmPrflDtls').submit(function() {
 return vrfyDetails();
 });
});

html:

<form name="frmPrflDtls" id="frmPrflDtls" method="get" action="details.php">
 <input name="frmactn" id="frmactn" type="hidden" />
 <input name="agechk" id="agechk" type="hidden" value="Senior" />
 <input type="text" name="age" id="age" value="Senior" />
 <input type="button" id="cmdSave" value="Save" />
</form>

So if I comment out the #cmdSave function and change the button type to submit all is well, but as it is, it will only validate false, or do nothing, but it never submits.

Thanks for any help.

• noangel: Found solution to problem, there was an error in the vrfyDetails() function which caused a page refresh masking the error. So the actual code provided was ok.

Answer 1

You should make the button type submit, and then add your specific code in the submit handler:

$('#frmPrflDtls').submit(function() {
 if ($('#age').val() != $('#agechk').val()) {
 //Do something
 return false; // This will prevent the form submission
 }
 else {
 //Set form variable
 $('#frmactn').val('Save');
 return vrfyDetails(); // This will allow the form submission
 }
});

and your HTML:

<form name="frmPrflDtls" id="frmPrflDtls" method="get" action="details.php">
 <input name="frmactn" id="frmactn" type="hidden" />
 <input name="agechk" id="agechk" type="hidden" value="Senior" />
 <input type="text" name="age" id="age" value="Senior" />
 <input type="submit" id="cmdSave" value="Save" />
</form>

It is important to have a submit button so that users without JavaScript will still be able to submit the form. It's also important to also validate on the server, because users can circumvent JavaScript validation easily.

• noangel: Sadly can't do it this way, the contents of $('#cmdSave').click(function (){}) is dynamically created by php when the page loads. Sometimes this check isn't even relevant.
• MvanGeest: Well, if it is, why can't you "dynamically create" this code dynamically by PHP, and exclude it when it's irrelevant? That might be easier than working around something that comes up regularly in SO questions and can have a variety of reasons ranging from bad HTML to by-design weirdness. In any case, not having a real submit is a terrible idea.

Answer 2

You should bind event to your form not button.

$(function(){
 $("#frmPrflDtls").submit(function(){
 if(form is ok){
 return true; // this will post your form
 }else{
 return false; // form will not be posted
 }
 });
});

• noangel: I have tried this and it didn't make any difference. My vrfyDetails() function either returns true or false. Like I say, the problem is it won't submit the form if the validation true when calling it using $('#frmPrflDtls').submit()