Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing ENTER Key to TAB key in Basic Form Entry with Submit

Status
Not open for further replies.

thebone

IS-IT--Management
Oct 16, 2001
3
US
How do I change the ENTER key to a Tab Key in a Form with several input fields and a submit button?

I want the ENTER key to act like the tab key and they have to click the submit button to save. But right now by default ENTER is submit.
 
Well, I can get you half way home. The script below will prevent the form from being submitted via the enter key. It has a sure fire method on the onSubmit event handler just in case a browser wants to submit a form that does not have a submit button using the enter key. Some, including myself, will argue that it's not necessary. But it doesn't hurt to have it anyways. However, in my test on this script in both IE 5 and NS 6, the enter key did not try to submit, so don't rely on the enter key every accessing the function. I just put the onSubmit event handler in there JUST IN CASE and thus the return false statement will prevent the form from being submitted. The key to the script below is changing the Submit button to a button type instead of a submit type.

Now, at first glance, one might think that the submit() method will fire the onSubmit event handler and therefore, not submit the form. However, here is a little blurp from my JavaScript reference that clears that up, therefore this script should work fine in all browsers..

One quirky bit of behavior involving the submit() method and onSubmit= event handler needs explanation. While you might think (and logically so, in my opinion) that the submit() method would be exactly the scripted equivalent of a click of a real submit button (or the press of an enter key), it is not. In Navigator, the submit() method does not cause the form's onSubmit= event handler to fire at all.


Hope that clears it up a bit :)

Load this into your browser and try to submit using the enter key.


<html>
<head>
<script Language=&quot;JavaScript&quot;>
<!--
function formCheck(testval,form_ref) {
if (testval == true) {
form_ref.submit()
// WILL NOT FIRE onSubmit EVENT HANDLER
} else {
return false
// JUST IN CASE THE BROWSER WANTS TO SUBMIT VIA THE ENTER KEY
}
}

//-->
</script>
</head>
<body>
<form name=&quot;someform&quot; method=&quot;post&quot; onSubmit=&quot;formCheck(false,this);&quot;>
Text1: <input type=&quot;text&quot; name=&quot;text1&quot; value=&quot;&quot;><br><br>
Text2: <input type=&quot;text&quot; name=&quot;text2&quot; value=&quot;&quot;><br><br>
Text3: <input type=&quot;text&quot; name=&quot;text3&quot; value=&quot;&quot;><br><br>
<input type=&quot;button&quot; value=&quot;Submit&quot; onClick=&quot;formCheck(true,this.form);&quot;>
</form>
</body>
</html>


Hope this at least solves half your problem.

TW
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top