Link to home
Start Free TrialLog in
Avatar of Batalf
BatalfFlag for United States of America

asked on

Key-event which executes a submit-button

I have a form with different submit-buttons.

What I'm looking for is a way to execute one of this buttons with keyboard-combinations. For instance, I would like the

<input type="submit" name="save" value="save">

button to be executed when I click "Ctrl+C".

Other keycode-combinations should execute other submit-buttons.

The solution only needs to work on IE on PC's.

Thanks in advance

Batalf
Avatar of fritz_the_blank
fritz_the_blank
Flag of United States of America image

Batlaf,

I am wondering if you can use the onKeyPress event to capture what keystrokes are pressed, and then use this information to either fire the appropriate button, or at the very least, change the action of the form and the value of the submit button and then submit the form.

Fritz the Blank
Avatar of nzjonboy
nzjonboy

here's some simple code

<HTML>
<HEAD>
<style>
     TD {
          cursor:default;
     }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var key = new Array();
key['1'] = "page1.html";
key['2'] = "page2.html";
key['3'] = "page3.html";
key['c'] = "page67.html";

function getKey(keyStroke) {
     isNetscape=(document.layers);
     eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
     which = String.fromCharCode(eventChooser).toLowerCase();

//     alert(eventChooser);

     for (var i in key)
          if (event.ctrlKey && which == i) {
               window.location = key[i];
               i=key.length+1;
          }
          else if(eventChooser == 13) {
               //load page1.html if enter key pressed
               window.location = key[i];
               i=key.length+1;
          }

}
document.onkeydown = getKey;
// -->
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=3 BGCOLOR="THREEDFACE" bordercolor="threedface">
    <TR>
        <TD onmouseout="this.style.borderColor=''" onmouseover="this.style.borderColor='black'">Page<U>1</U></TD>
        <TD onmouseout="this.style.borderColor=''" onmouseover="this.style.borderColor='black'">Page<U>2</U></TD>
        <TD onmouseout="this.style.borderColor=''" onmouseover="this.style.borderColor='black'">Page<U>3</U></TD>
        <TD onmouseout="this.style.borderColor=''" onmouseover="this.style.borderColor='black'">Page<U>C</U></TD>
    </TR>
</TABLE>
</BODY>
</HTML>



hope this helps

nzjonboy
Here is an article that shows you how to capture the pressed key:

http://developer.irt.org/script/1214.htm
Avatar of Batalf

ASKER

I know how to use event.keyCode, event.ctrlKey, but how could I use this to submit the form?

And not by the submit() function because I have several submit-buttons, all identified by different names.
ASKER CERTIFIED SOLUTION
Avatar of ahosang
ahosang
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I was thinking that you could create a JavaScript that would dynamically change the action of the form and the value of the submit button and then execute the submit button; in effect, simulating the click event of your different buttons.

Fritz the Blank
Avatar of Batalf

ASKER

The action of my form is all to the same page, but based on which submit-button the user pressed, different actions will be executed by serverside-scripts.

I have found a temporary solution, where I use hidden variables<input type="Hidden"> and set a value to them based on which keyboard-shortcut the user pressed. Then I called forms[0].submit(). Then I know I know in my serverside-script what to do based on this hidden-variable.

For instance, if the user presses Ctrl+S, I set the hidden-variable to "S". Then I Submit the page using submit().

Isn't there a simpler way of doing this?

Batalf
The only thing that I can think of is to set the hidden variable to the value of the submit button in question regardless of whether a shortcut is used or if the button is clicked. That way, you need only interogate the hidden field to pass the parameter back to the page.

Fritz the Blank
Didi you try my code?