23

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;
    }
}
postfuturist
  • 22,211
  • 11
  • 65
  • 85

6 Answers6

5

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>
cLFlaVA
  • 1,468
  • 3
  • 13
  • 17
  • @steveth45 see my example... the input buttons could easily be changed to submit buttons. – cLFlaVA Dec 19 '08 at 21:24
  • Aha! The click() is the answer! – postfuturist Dec 19 '08 at 21:25
  • @steveth45 - for completeness, be sure you handle the event in all(most) common browsers. some treat the event object differently. http://www.quirksmode.org/dom/events/index.html – cLFlaVA Dec 19 '08 at 21:32
  • Well, if the javascript fails in other browsers it will still behave correctly because the form is set up to fundamentally work correctly in a no-javascript environment (webkit withstanding). – postfuturist Dec 19 '08 at 21:38
  • BTW, I accepted this answer because it contains the piece I needed to get my code to work, namely calling click() instead of focus() on the target submit button. – postfuturist Dec 19 '08 at 22:34
4

The invisible default submit action is a reasonable approach and doesn't drag JavaScript into the equation. However form elements with 'display: none' aren't generally reliable. I tend to use an absolutely-positioned submit button before the others on the page, positioned off the left-hand-side of the page. It's still pretty ugly, but gets the job done.

bobince
  • 528,062
  • 107
  • 651
  • 834
2

How about using CSS? You can just set the first button, your default button outside of the visible area of the screen with a "position: absolute; left: -200px; top: -200px;". As far as I remeber, it will not be ignored by any browser, because it is not invisible. This works just fine:

<form method="get">
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth"
       style="position: absolute; left: -200px; top: -200px;"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
</form>

And the earth gets saved ...

sth
  • 222,467
  • 53
  • 283
  • 367
coretys
  • 21
  • 2
0

Just control the key press event. put onKeyPress in the body tag


onkeypress=CheckKeyPress()

Then handle the enter key


function CheckKeyPress(){
    var code;
    if(!e) var e = window.event;
    if(e.keyCode){
        code = e.keyCode;
    }else if(e.which){
        code = e.which;
    }
    if(code == 13){
        //Do Something
    }
}
Tester101
  • 8,042
  • 13
  • 55
  • 78
  • this code only does something if you put code in the area that says //do something, and you press the enter key – Tester101 Dec 20 '08 at 23:10
0

Don't intercept the keydown event, intercept the submit event.

so: 

form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}
Kenan Banks
  • 207,056
  • 34
  • 155
  • 173
  • Hmm, the trick here would be to detect from inside this function if it was arrived here by the user hitting enter in a text input or clicking on the actual submit button. Is it possible? – postfuturist Dec 19 '08 at 21:34
  • @steveth45: As far as I know, no. When onsubmit is called, this/e.target/e.srcElement all points to the form element, not the button. – some Dec 20 '08 at 00:42
0

What about using separate forms? Maybe I'm missing something which makes this impossible :P

finpingvin
  • 692
  • 1
  • 7
  • 14
  • 1
    Yes, the various submit buttons still need the values posted from each of the various inputs in the form, so splitting up the form doesn't work. – postfuturist Dec 19 '08 at 22:37
  • And you can't make different actions on the server-side depending on what fields where filled-in? – finpingvin Dec 19 '08 at 23:50
  • 1
    I could but that wouldn't make any sense with my page and is completely unrelated to this problem. – postfuturist Dec 19 '08 at 23:53