Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jquery to handle multiple submit buttons

8:32 am on Jun 24, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 20, 2004
posts: 615
votes: 0

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.


... 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.
9:44 am on June 24, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 5, 2004
posts: 198
votes: 0

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 */ });
4:59 pm on June 24, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

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) {
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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members