Question

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.

Answer 1

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.

EDIT:

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

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();
});