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.

Code

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

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.

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.

Code

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

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.

• javascript
• html
• forms
• submit

• I faced the same problem, but I did not find a solution for it. – Ghyath Serhal Commented Jul 20, 2011 at 5:33

4 Answers 4

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 e 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.

EDIT:

In response to your ments, 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".

HTML:

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

JS:

$("#item").keydown(function(event){
    if(event.keyCode == 13) {
        addFields();

        event.preventDefault();
        event.stopPropagation();
    }
});

$("#add_item").click(function(event) {
    addFields();
});

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

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.

Edit

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.

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

example: http://jsfiddle/U4Tpw/

use something like

$('form').submit(function() {
    // identify the form by getting the id attribute
    handleWhichForm($(this).attr('id'));
});