Take the 2-minute tour ×

I have a form with multiple submit buttons and I'm listening for the 'submit' event via JavaScript. I want to know which submit button or form field (if the user pressed 'Enter/Return') triggered the submit event. Is there a way to get the HTML element that the user clicked on or pressed 'Enter/Return' in?

Update since people aren't understanding me:

This is via JavaScript before the form is submitted. No server-side detection allowed. I also need to handle the form being submitted via the user pressing Enter or Return.


<form action="" method="POST">
    <input type="text" name="item">
    <input type="submit" value="Add item">

Clicking 'Add Item' or pressing Return/Enter inside name="item" will add another form field.

Final Note

As far as I can tell, there isn't a way to detect which form field triggered a form submission. If you need to prevent submitting a form that has multiple buttons and/or from Enter/Return, you'll need to use <input type="button"> and bind event handlers to the form fields you want to stop form submission from.

share|improve this question
I faced the same problem, but I did not find a solution for it. –  Ghyath Serhal Jul 20 '11 at 5:33

4 Answers 4

up vote 5 down vote accepted

If you have multiple submit buttons, the way you can tell is by giving each of them a unique name attribute, like this:

<input type="submit" name="submit1" value="Submit 1"/>
<input type="submit" name="submit2" value="Submit 2"/>
<input type="submit" name="submit3" value="Submit 3"/>

The one that is focused is sent along with the form submit, so if you clicked the one with a name of "submit2", that would come through in the form POST (or GET). If enter is hit, the first button in the source (in this case submit1) is considered the default and is sent along. You could set it to display:none to use as a dummy for detecting whether enter was pressed vs actually clicking a submit button.


In response to your comments, to capture the enter key getting pressed in certain elements you can do this with jQuery.

Note, you'll need to give first_name and add_item id attributes, and turn add_item into a type="button" instead of type="submit".


<form action="" method="POST">
    <input type="text" id="item" name="item"/>
    <input type="button" id="add_item" value="Add item"/>


    if(event.keyCode == 13) {


$("#add_item").click(function(event) {
share|improve this answer
I need to detect it via JavaScript before the form is submitted. –  Ryan Doherty Jul 20 '11 at 5:50
Is there a particular reason you need that data on the JavaScript side? Just trying to understand what you're trying to solve. –  Jordan Jul 20 '11 at 5:53
Jordan: this is a pretty heavy AJAX app and I have a dynamic form that I can add elements to before submitting. A user can either press enter inside a form field to add an element or press a submit button to add it. –  Ryan Doherty Jul 20 '11 at 6:03
Ah, well then capturing the keypress event on the form fields that can trigger that element addition makes more sense. I will add that to my answer. –  Jordan Jul 20 '11 at 6:04
I just added a short code sample. –  Ryan Doherty Jul 20 '11 at 6:11

You could set the onclick event on each element you are interested and call a javascript function with a different parameter for each element clicked.

From that function you send the idendifier of the button to the server side as a parameter

share|improve this answer
I also need to detect users pressing 'Enter/Return' when inside a form field, so onlick isn't enough. –  Ryan Doherty Jul 20 '11 at 5:34
This is not a very practical solution, because the form may contains other controls that cause the post back, like checkbox, dropdownlist,.... –  Ghyath Serhal Jul 20 '11 at 5:35
+1 i thing using the onclick event is the best way. any button that can cause the form to submit should have it in case you want to know which button was clicked –  Ibu Jul 20 '11 at 5:38
@Ibu - but some browsers will pretend that a submit button was clicked even if enter is used to initiate submit. –  RobG Jul 20 '11 at 6:04
if you have multiple submit button i am sure you will capture the enter event too @RobG –  Ibu Jul 20 '11 at 6:19

Just put a different name on each submit button, whichever one was clicked will be submitted (i.e. its name/value pair) with the form. Forms have worked like this since the begining of (WWW) time.

If the form is sumitted by enter or other keypress, no the first submit button name/value pair will be submitted.


Re-reading your question, you may want to determine how the form was submitted before it is sent. A click listener on the form can remember the last submit button clicked, but in Firefox, pressing enter in an input dispatches a fake click on the first submit button so you can't detect it.

I think you can't do it reliably other than using the basic method suggested above or Jordan's hidden submit button. If you say why you need to do this, perhaps more help can be provided.

share|improve this answer
Your last sentence is incorrect. It chooses the first submit button in source order if you hit enter. –  Jordan Jul 20 '11 at 5:40
@Jordan - my error. I think OP wants to find out from the submit event though, so this may not suit. –  RobG Jul 20 '11 at 5:46
Looks like it's partially my error too. The behaviour is different across browsers, but in at least some browsers it selects a default submit button. –  Jordan Jul 20 '11 at 6:09

here's an option if you don't mind using jQuery:

example: http://jsfiddle.net/U4Tpw/

use something like

    // identify the form by getting the id attribute
share|improve this answer

Your Answer


