Detect which submit button was clicked

Question

I know this question sounds a lot like a bunch of others that are out there, but I swear I can't find the right solution anywhere. I have a legacy form that has multiple submit buttons. If one is clicked, I need to do a bit of client-side validation and potentially stop the submit. If the other is clicked, I don't need to do this validation.

What I'm finding is that if I create a .submit() handler, I can't seem to access which button was actually clicked. On the other hand, if I capture the .click() event of the button I need to worry about, then I can't prevent the form from submitting via .preventDefault() (or .stopImmediatePropagation()).

Here's the most recent iteration of the code that attempts to use the buttons .click() handler:

$('#nextButton').click( function( e ) {
  e.preventDefault(); // The form submits anyway (which kind of makes sense)
  // return false also doesn't prevent the submission

  // If any session question is unanswered, abort
  /* $('#registrants input:text[id$="Answer"]').each( function( i, input ) {
    if( $.trim( $(input).val() ) == '' ) {
      submit = false;
    }
  });*/
});

What am I missing here? There has to be a way to do this and it seems like it should be fairly simple, but I'll be damned if I've had any luck at all.

Thanks.

if there is more than one submits why u use same id for them. Use different ids and bind click functions to each submit button so no need to find out which submit is clicked. — Sedat Başar, Oct 06 '11 at 11:51
@Sedat -- they don't have the same id. The one I care about is `#nextButton` where I'm capturing the click. What I can't seem to do is prevent the submission. — Rob Wilkerson, Oct 06 '11 at 11:52
@RobWilkerson - `preventDefault` should work fine: http://jsfiddle.net/interdream/DQNSb/1/ — James Allardice, Oct 06 '11 at 11:57
@JamesAllardice -- Very strange. I wonder why it's not working for me. I'll check my jQuery version... — Rob Wilkerson, Oct 06 '11 at 12:02
You can use click handlers to detect the button and then `$('form').bind('submit', 'false');` to prevent the default action. — Michael Mior, Oct 06 '11 at 12:02

Przemek · Answer 1 · 2011-10-06T12:07:57.400

Maybe something like this?

http://jsfiddle.net/4wnyY/3/

var which;

$("input").click(function () {
    which = $(this).attr("id");
});
$("#form").submit(function () {
    if (which == "button2") {
        return false; // if "button2" submit clicked - prevent submission
    }
});

The main issue with this code would be browser compatibility - i don't know if all browsers work the same, if the click event will be caught before the submit one. I remember that it was different on one version of IE, maybe 7. But it's fixable.

CheeseSucker · Accepted Answer · 2011-10-06T12:05:03.853

3

Maybe this helps: http://geekswithblogs.net/renso/archive/2009/09/09/intercept-a-form-submit-with-jquery-and-prevent-or-allow.aspx

Basically what it says is to check the button ID in the form submit() handler.

http://jsfiddle.net/4wnyY/5/

edited Oct 06 '11 at 12:05

answered Oct 06 '11 at 11:59

CheeseSucker

1,270
1
9
13

7

Using explicitOriginalTarget as suggested, is not cross-browser compatible. See here: http://stackoverflow.com/questions/179826/crossbrowser-equivalent-of-explicitoriginaltarget-event-parameter – ErJab Mar 08 '12 at 09:34

score 0 · Answer 3 · answered Feb 18 '16 at 22:40

@Przemek has the right answer and approach for this.

I would only add to insure you put your function inside the $(document).ready(function(){} if you are doing a form submission.

Works across all browsers. See below for the solution that worked for me based on Przemek's example:

    //Used to hold the button name of what was clicked
        var which;

        $(document).ready(function () {

            $("button").click(function () {
                which = $(this).attr("id");
                //alert("Button Clicked Name");
            });

            $('#searchForm').submit(function (evt) {
                if (btnName = "btnSave") {
                    // do something for the Save option
                } else {
                    // do something different for the Submit or Save and Close option
                }
}
}

Detect which submit button was clicked

3 Answers3

Linked