Submit Form Using WASD or up/down/left/right

@PixelmixerAug 14.2005

I have 4 submit buttons in a form… each named “Submit” with the values “North”, “South”, “East”, and “West”. When a button is submitted it sends its value to a php script that determines which direction was clicked… this in turn moves a character around a map. Everything works flawlessly when a button is clicked…..

However….

In the game clicking a direction gets repetative. I want to assign each button a key on the keyboard… so when that key is pressed it submits a value…. for example…

“W” key is hit on the keyboard… the value “North” is submitted… or up/down/left/right…. say.. the “UP” key is hit, the value “North” is sent…

My php code is pretty much irrelavent… but basically what im asking is how to submit a specific button when a certain key is pressed…. is this even possible. I’d also take suggestions on better ways to do it…

btw.. if it helps the variables should be passed using POST method

to post a comment

JavaScript

6 Comments(s) _↴

@UltimaterAug 14.2005 — #

<i>
 </i>&lt;script type="text/javascript"&gt;
 document.onkeydown = keyDown
 document.onkeyup = keyUp
 if("captureEvents" in document){
 document.captureEvents(Event.KEYDOWN|Event.KEYUP)
 }
 
 function keyDown(arg1){
 var k;
 if ("which" in arg1){k=arg1.which}
 else if("keyCode" in arg1){k=arg1.keyCode}
 else if("keyCode" in window.event){k=window.event.keyCode }
 else{return true}
 
 if (k == 37){moveW("left","keydown")}                    //left
 if (k == 38){moveW("up","keydown")}                      //up
 if (k == 39){moveW("right","keydown")}                   //right
 if (k == 40){moveW("down","keydown")}                    //down
 
 return true
 }
 
 // ------- Key Up --------
 function keyUp(arg1){
 var k;
 if ("which" in arg1){k=arg1.which}
 else if("keyCode" in arg1){k=arg1.keyCode}
 else if("keyCode" in window.event){k=window.event.keyCode }
 else{return true}
 
 
 if (k == 37){moveW("left","keyup")}                    //left
 if (k == 38){moveW("up","keyup")}                      //up
 if (k == 39){moveW("right","keyup")}                   //right
 if (k == 40){moveW("down","keyup")}                    //down
 return true
 
 }
 &lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 function moveW(toWhere,myEvent){
 alert(toWhere)
 alert(myEvent)
 }
 &lt;/script&gt;

@UltimaterAug 14.2005 — #Here's a more complete version:

<i>
 </i>&lt;head&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!-- Begin
 /* This script and many more are available free online at
 The JavaScript Source!! http://javascript.internet.com
 Created by: Ultimater :: http://ultimiacian.tripod.com/
 Add this snippet to the very beginning of your script. */
 //[url=http://javascript.internet.com/snippets/]document.getElementById[/url] backdoor function
 if(!document.getElementById){
 if(document.all)
 document.getElementById=function(){
 if(typeof document.all[arguments[0]]!="undefined")
 return document.all[arguments[0]]
 else
 return null
 }
 else if(document.layers)
 document.getElementById=function(){
 if(typeof document[arguments[0]]!="undefined")
 return document[arguments[0]]
 else
 return null
 }
 }
 // End --&gt;
 &lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 var dir2go="none"
 document.onkeydown = keyDown
 document.onkeyup = keyUp
 if("captureEvents" in document){
 document.captureEvents(Event.KEYDOWN|Event.KEYUP)
 }
 
 function keyDown(arg1){
 var k;
 if ("which" in arg1){k=arg1.which}
 else if("keyCode" in window.event){k=window.event.keyCode}
 else if("keyCode" in arg1){k=arg1.keyCode}
 else if("which" in window.event){window.event.which}
 else{return true}
 
 if (k == 37){moveW("left","keydown")}                    //left
 if (k == 38){moveW("up","keydown")}                      //up
 if (k == 39){moveW("right","keydown")}                   //right
 if (k == 40){moveW("down","keydown")}                    //down
 
 return true
 }
 
 // ------- Key Up --------
 function keyUp(arg1){
 var k;
 if ("which" in arg1){k=arg1.which}
 else if("keyCode" in window.event){k=window.event.keyCode}
 else if("keyCode" in arg1){k=arg1.keyCode}
 else if("which" in window.event){window.event.which}
 else{return true}
 
 
 if (k == 37){moveW("left","keyup")}                    //left
 if (k == 38){moveW("up","keyup")}                      //up
 if (k == 39){moveW("right","keyup")}                   //right
 if (k == 40){moveW("down","keyup")}                    //down
 return true
 
 }
 &lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 function moveW(toWhere,myEvent){
 if(dir2go=="none"){
 dir2go=toWhere
 document.getElementById(toWhere+"Submit").click()
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;

<i>
 </i>&lt;body&gt;
 &lt;form&gt;
 &lt;input id="leftSubmit" type="submit" value="West"&gt;
 &lt;input id="upSubmit" type="submit" value="North"&gt;
 &lt;input id="rightSubmit" type="submit" value="East"&gt;
 &lt;input id="downSubmit" type="submit" value="South"&gt;
 &lt;/form&gt;
 &lt;/body&gt;

Use the arrow keys to control. (up/down/left/right)

@PixelmixerauthorAug 14.2005 — #awesome!... I have one small problem though. It works great in firefox/ mozilla browsers, but in IE it doesn't. I usually have the reverse problem and I know very little javascript... but i'd assume this is an easy fix... how would i go about that?

@UltimaterAug 14.2005 — #My little If/else if/else if/else if/else statement needs to be adjusted in IE:

IE wants:

<i>
 </i>k=window.event.keyCode

Hmm... it stumbles here somewhere for some reason.... I'll need to re-write the If/else if/else if/else if/else statement.

@UltimaterAug 14.2005 — #This one works on both browsers:

<i>
 </i>&lt;head&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!-- Begin
 /* This script and many more are available free online at
 The JavaScript Source!! http://javascript.internet.com
 Created by: Ultimater :: http://ultimiacian.tripod.com/
 Add this snippet to the very beginning of your script. */
 //document.getElementById backdoor function
 if(!document.getElementById){
 if(document.all)
 document.getElementById=function(){
 if(typeof document.all[arguments[0]]!="undefined")
 return document.all[arguments[0]]
 else
 return null
 }
 else if(document.layers)
 document.getElementById=function(){
 if(typeof document[arguments[0]]!="undefined")
 return document[arguments[0]]
 else
 return null
 }
 }
 // End --&gt;
 &lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 var dir2go="none"
 document.onkeydown = keyDown
 document.onkeyup = keyUp
 if("captureEvents" in document){
 document.captureEvents(Event.KEYDOWN|Event.KEYUP)
 }
 
 function keyDown(){
 var k,e;
 if(typeof arguments[0] !="undefined")e=arguments[0]
 else if("event" in window)e=window.event
 else return true
 
 if("keyCode" in e){k=e.keyCode}
 else if ("which" in e){k=e.which}
 else{return true}
 
 if (k == 37){moveW("left","keydown")}                    //left
 if (k == 38){moveW("up","keydown")}                      //up
 if (k == 39){moveW("right","keydown")}                   //right
 if (k == 40){moveW("down","keydown")}                    //down
 
 return false
 }
 
 // ------- Key Up --------
 function keyUp(){
 var k,e;
 if(typeof arguments[0] !="undefined")e=arguments[0]
 else if("event" in window)e=window.event
 else return true
 
 if("keyCode" in e){k=e.keyCode}
 else if ("which" in e){k=e.which}
 else{return true}
 
 
 if (k == 37){moveW("left","keyup")}                    //left
 if (k == 38){moveW("up","keyup")}                      //up
 if (k == 39){moveW("right","keyup")}                   //right
 if (k == 40){moveW("down","keyup")}                    //down
 return false
 
 }
 &lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 function moveW(toWhere,myEvent){
 if(dir2go=="none"){
 dir2go=toWhere
 document.getElementById(toWhere+"Submit").click()
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;input id="leftSubmit" type="submit" value="West"&gt;
 &lt;input id="upSubmit" type="submit" value="North"&gt;
 &lt;input id="rightSubmit" type="submit" value="East"&gt;
 &lt;input id="downSubmit" type="submit" value="South"&gt;
 &lt;/form&gt;
 &lt;/body&gt;

@PixelmixerauthorAug 14.2005 — #sweet... thanks very much yet again... if im online.. heres a sample of how this script is being used... http://pmixel.mine.nu/game/tests/coord_test.php

Also in #JavaScript _↴

If one Div expands...expand all others with same class JavaScript If/Else Statement - unexpected result From Select menu to radio buttons -Newbie

Success!

Help @Pixelmixer spread the word by sharing this article on Twitter...

Tweet This

Submit Form Using WASD or up/down/left/right

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Submit Form Using WASD or up/down/left/right

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴