Value of submit button clicked

Question

This should be really straight forward.

I'm checking if a form is being submitted using jquery. The form has multiple submit buttons with various values:

<button type="submit" value="foo">Foo</button>
<button type="submit" value="bar">Bar</button>

I would like to find the value of the button that just submitted the form:

$(form).live('submit', function() {
    // Get value of submit button
}

Thanks

amit_g · Accepted Answer · 2013-06-14T18:44:01.090

25

Bind the event to submit buttons instead of the form and then $(this) would have the reference to the buttons...

$(":submit").live('click', function() {
    alert($(this).val());
})

EDIT As of jQuery 1.7 live is deprecated. Use on instead.

$(document).on("click", ":submit", function(e){
    alert($(this).val());
});

edited Jun 14 '13 at 18:44

answered Mar 16 '11 at 17:17

amit_g

30,880
8
61
118

Per docs, [.live()](http://api.jquery.com/live/) is deprecated in favor of [.on()](http://api.jquery.com/on/) – CrazyPyro Jun 14 '13 at 16:56
@CrazyPyro, This question was asked in Mar 2011 and jQuery 1.7 that deprecated live was released on Nov 2011. – amit_g Jun 14 '13 at 18:34

score 6 · Answer 2 · edited Apr 17 '13 at 00:12

6

This seems to get the clicked submit button:

jQuery("#TheForm").context.activeElement.name
jQuery("#TheForm").context.activeElement.value

edited Apr 17 '13 at 00:12

Jesse

8,605
7
47
57

answered Apr 16 '13 at 23:56

Mattias

87
1
1

score 3 · Answer 3 · answered Mar 16 '11 at 17:10

You can't if you're using the "submit" event. A form can be submitted without ever hitting a submit button.

In order to obtain which button was clicked, you need to alter your approach by using custom events and marking down which button was actually clicked (creating a selector that can catch click on any of the X buttons in the form). That also requires binding a custom event and prohibiting submit event of the form itself.

Grim... · Answer 4 · 2013-09-26T10:17:38.923

1

$('input[type="submit"]').click(function() {
    alert ($(this).val());
}

edited Sep 26 '13 at 10:17

answered Mar 16 '11 at 17:07

Grim...

16,518
7
45
61

It won't be caught in the actual form's submit event, it's a separate event. – Furicane Mar 16 '11 at 17:10
True enough. You could put the value into a variable, as the form is likely _about_ to be submitted. – Grim... Mar 16 '11 at 17:19
One of the brackets had gone missing. Try it now. – Grim... Sep 26 '13 at 10:18

Rui Seixas Monteiro · Answer 5 · 2012-07-26T11:46:02.890

0

I recommend the use of the Firebug Add On, you get a lot of responses to your questions just looking to the data in the console. I realize that in your case you can access the submit value this way:

alert($(this).context.submit.value);

edited Jul 26 '12 at 11:46

answered Jul 24 '12 at 05:13

Rui Seixas Monteiro

679
5
4

2

Maybe I'm using it in the wrong place - but I got "undefined" when I tried this. I had it inside here $('form').submit(function () { ... } – Jen Jan 16 '13 at 00:26

CrazyPyro · Answer 6 · 2011-06-08T15:12:49.960

0

I ended up using the click event on each submit button, as others have suggested. That works fine, and you can return false from them if you want to cancel the submit. Just don't try to also bind the submit event of the form. You could also have each of these handlers call a common submit-handler function, passing their own value as an argument.

edited Jun 08 '11 at 15:12

answered Jun 08 '11 at 01:02

CrazyPyro

3,257
3
30
39

The following is an interesting approach, but ONLY works on Firefox: (see also http://stackoverflow.com/questions/179826/crossbrowser-equivalent-of-explicitoriginaltarget-event-parameter ) `$('form').submit( function(event) { var whichClicked = event.originalEvent.explicitOriginalTarget.id; //if ( whichClicked == "approve" ) // etc... });` – CrazyPyro Jun 08 '11 at 15:13

Value of submit button clicked

6 Answers6

Linked