Use Javascript to change which submit is activated on enter key press

I have a form on an HTML page with multiple submit buttons that perform different actions. However, when the user is typing a value into a text input and hit enters, the browsers generally act as though the next submit button sequentially was activated. I want a particular action to occur, so one solution I found was to put in invisible submit buttons into the HTML directly after the text inputs in question, like this:

<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />

This works like a charm in most browsers, except that it doesn’t in webkit browsers like Safari and Chrome. For some reason they skip over the invisible submit button. I’ve been trying to figure out how to intercept the enter key press and activate the proper submission using Javascript, but I haven’t been able to get it to work. Intercepting the keydown and setting focus on the proper submit does not work.

Is there any way using Javascript or otherwise to select which submit button will be used when the user hits the enter key in a text input on an HTML form?

Edit: To clarify, the form can’t require Javascript to “work” fundamentally. I don’t care if the enter key submission is undesireable without Javascript on webkit browsers, but I can’t remove or change the order of the submit buttons.

~~This is what I tried, it doesn’t change the submission behavior in webkit browsers.~~
What worked is to change the focus() in the following code to click().

document.onkeypress = processKey;

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click(); // previously: focus()
    }
}

EDIT: FINAL SOLUTION:

Works with every browser and only intercepts the enter key when needed:

HTML:

<input type="text" name="something" value="blah" 
    onkeydown="return processKey(event)" />
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />

Javascript:

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click();
        return false;
    }
}

Answer

One way would be to remove all of the submit buttons and use input buttons to submit the form programatically. This would remove the ability to submit the form by hitting the enter key in a textbox. You could also leave one submit button as the default submit functionality, and use regular button inputs for the others and submit the form programatically.

The obvious short-fall of this is that the users would require JavaScript to be enabled. If this isn’t a problem this is a consideration for you.

EDIT:

Here, I tried to make an example for you using jQuery (the same functionality can easily be created without jQuery)… let me know if this helps…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"><!--
    $(document).ready(function(){
        $("#f input").filter(":text").keydown( function(event) {
            if (event.keyCode==13) {
                $(this).nextAll().eq(0).click();
            }
        });
    });
    //--></script>
</head>
<body>
    <form name="f" id="f">
        <input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
        <input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
        <input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
    </form>
</body>
</html>

Advertisement

Answer