tags:

views:

6788

answers:

8
+8  Q: 

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;
    }
}
+2  A: 

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"&gt;
<html>
<head>
    <title>Untitled</title>
    <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    <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  2008-12-19 20:56:47
@steveth45 see my example... the input buttons could easily be changed to submit buttons.
cLFlaVA  2008-12-19 21:24:53
Aha! The click() is the answer!
postfuturist  2008-12-19 21:25:57
@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  2008-12-19 21:32:48
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  2008-12-19 21:38:58
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  2008-12-19 22:34:18
A: 

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  2008-12-19 21:19:45
You forgot to put "e" in the header of the function...
some  2008-12-20 00:05:39
this code only does something if you put code in the area that says //do something, and you press the enter key
Tester101  2008-12-20 23:10:19
A: 

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;
}
Triptych  2008-12-19 21:25:43
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  2008-12-19 21:34:39
@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  2008-12-20 00:42:42
A: 

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

finpingvin  2008-12-19 21:49:09
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  2008-12-19 22:37:09
And you can't make different actions on the server-side depending on what fields where filled-in?
finpingvin  2008-12-19 23:50:26
I could but that wouldn't make any sense with my page and is completely unrelated to this problem.
postfuturist  2008-12-19 23:53:19
+2  A: 

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  2008-12-20 14:21:36
This is a good idea, didn't go with it, but gets an upvote.
postfuturist  2009-02-09 22:26:36
A: 

Thanks nice solution (in main post)

 2009-05-27 08:12:20
+1  A: 

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

coretys  2010-01-01 12:42:04
`And the earth gets saved ...` LOL!
Nirmal  2010-01-02 03:14:39
A: 

Thanks

Easy Solution

Meghavi Patel  2010-10-02 13:15:47

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?