jquery to handle multiple submit buttons

[neophyte]

Hello All -

I've got a form with multiple submit buttons.

One button (Next >) actually submits the form, while another button (< back) simply sends the user back to the previous page, and another (Cancel) send the user to another page on the site, cancels forms sessions, etc.

What I need to do is, when jquery detects a click on the Next > button, it's validates certain fields on the page and, if all are TRUE, it submits the form. However, if < Back or Cancel are pressed, no validation is done and the user is just "relocated" to a different page.

What's happening now - code below - is that no matter what button is pressed, the validation routine fires. I only want the validation to occur if the Next button is pressed.

$(document).ready(function(){

... other stuff going on up here

//Check Submit
$('form#guestDetail input#next').submit(function() {
var first = valName('first');
var last = valName('last');
var contry = valSelect('country');
var email1 = valEmail1();

if(first && last && contry && email1) { return true } else { return false };
});
});

If I could target the NAME of the submit button (as I'm trying to in the selector above) then everything should work but I can't find the correct syntax to do this.

Any assistance - or a better way to accomplish this - would be greatly appreciated.

[alias]

I have a suspicion your HTML is causing the problems.

And though I don't know how exactly it looks like (I suspect your buttons are actually submit inputs like <input type='submit' />), I suggest you rather use HTML for buttons as this:

<button class="back">&lt; Back</button>
<button class="next" type="submit">Next &gt;</button>
<button class="cancel">Cancel</button>

This will ensure that the other buttons don't actually submit the form.

And the jQuery binding for the NEXT button should instead be done on the form submission (which is a bit more accessible), like this:

$('form#guestDetail').bind('submit', function(){ /* your callback function returning either true or false here depending on validation */ });

[rocknbil]

You are pointing to the button with the submit() function. Buttons don't submit, forms do.

$('form#guestDetail input#next').submit(function() {

You could start with this, but with the previous information, I think you may need to rethink your logic.

$('form#guestDetail input#next').click(function() {

Before doing that, you can simplify your selectors quite a bit. If you have the id next,

<input type="submit" id="next" value="Next &gt;">

You don't need the form or input selector

$('form#guestDetail input#next').click(function() {

You can do

$('#guestDetail #next').click(function() {

and probably don't even need the form id selector

$('#next').click(function() {

So this brings us to the question whether click will work as you are operating on the form. I suggest you pass a reference to the form in your function.

$('#next').click(function() { validateForm(this.form); } 
// 
function validateForm(form) { 
 msg=''; 
 if ($('#first').value=='') { msg += 'The first name field is required.\n'; } 
 if ($('#last').value=='') { msg += 'The last name field is required.\n'; } 
 if ($('#email1').value=='') { msg += 'The email field is required.\n'; } 
 if (msg=='') { form.submit(); } 
 else { alert(msg); } 
 return false; 
} 

(This approach is further complicated by some users not being able to click - try tab/tab/tab to highlight the button and press enter.)

You always want to return false on the click, so the form doesn't submit.

Another (and probably better) way to approach it is use a submit handler on the form, combined with other handlers on your buttons.

<form action="" method="post" onsubmit="validateForm(this);">

Note that when done this way, it's not "this.form" - only use that on form input objects.