Enter Key Submits Form

[ShadowMage]

On my form, any time I hit enter on an input field it submits the form. On certain fields this is ok, but on some I need it to act as if I had hit tab instead.Will the onkeypress, onkeydown or onkeyup events be able to prevent a submit?Any help is appreciated, thank youjkloth

[jeffman]

Yes. Capture all keypress events in your text elements and pass them to the same handler. Return true for every key except 13. For that one, use some system of id's to let you know which element to be "tabbed" into. Get a reference to that element and call its .select() method. Then return false.Getting your keycode looks like this (for max compatibility):

function capture_return_key (e) {	e = e || window.event;	var k = e.keyCode || e.which;	if (k == 13) {		// do something		return false;	}	return true;}

[ShadowMage]

It's not working. Firebug tells me that 'e' is undefined. How am I supposed to be calling this function.Here is how I have it:

<input ... onkeypress='testKey();' onchange='calcTotal();' />

I tried using a 'this' reference as an argument but that didn't work either.

<input ... onkeypress='testKey(this);' onchange='calcTotal();' />

EDIT**Solved that issue, but it still submits after hitting enter.EDIT EDIT**Solved it. added a return to the call like this:

<input ... onkeypress='return testKey(event);' ... />

Thanks again, DD You've been a huge help to me with a lot of my problems.

[jeffman]

I'm glad you figured out the missing pieces. A lot of people would have wrung their hands and waited for the answer. :)Pretty soon now you're going to want to stop assigning handlers inside the HTML tags and start assigning them as part of your script. That looks like this

function testKey (e) {	// whatever}function init () {	var el = document.getElementById("mytext");	el.onclick = testKey;}window.onload = init;*   *   *<input type="text" id="mytext">

The first thing to notice of course is no javascript in the tag. This is true to the spirit of modern HTML.Next, notice that we have to wait for the document to load before assigning the handler. If we tried it in the global space of the script, it would try to get a reference to the text input before the input was part of the DOM. So it would fail.Next, notice how the onload handler and the click handler are assigned function references rather than snippets of code. Not a big deal for a short snippet, but conceptually better, since a snippet has to be converted from a string to code, while a reference already is code. This is why there are no parentheses.Also notice that we can totally avoid (1) passing a reference to the event object (the interpreter passes it to testKey() automatically) and (2) we don't need those redundant return statements that you discovered are necessary with inline code.

[ShadowMage]

Wow, thanks DD. Obviously, I have a lot to learn about web programming. :)What you're saying there makes a lot of sense. This seems as though it would be more efficient as well as much easier to maintain. Right now I would have to search the entire document to find all the elements that have handlers, whereas doing it the way you just described, would allow me to look in just the JavaScript to see the handlers.Thanks once again DD.

[jeffman]

Good observation. The alternative for internal scripts is LOTS of annoying scrolling. For external scripts, you'd be flipping back and forth between documents even more than you already have to do. Also annoying. This way, you can avoid all that.

[ShadowMage]

Right!OK so now I have a question, can you pass parameters doing it this way? I'm sure you can, it's just a matter of how.I tried this, but it just calls the function. It doesn't assign the function:

document.getElementById("TestText").onkeypress = testAlert("Test");

The testAlert function just accepts a string and alerts it.How can I use this method of assigning functions to pass parameters?

[jeffman]

Correct. Assigning it that way executes the statement instead of assigning a function reference. The right technique involves an anonymous function (sometimes called a lambda function):

document.getElementById("TestText").onkeypress = function (e) {	alert(e);	someOtherFunc("test");	anotherFunc(this.value);}

e is a reference to the event object (at least in standards compliant browsers). It doesn't matter what it's called, but e or evt are pretty common.this refers to the "TestText" element. Be aware that this.value will return the input's value BEFORE the keypress, since it's the keypress that we've captured and we haven't released it yet.My projects typically have an initialization routine that assigns dozens of event handlers in this manner.

[ShadowMage]

Awesome! Works like a charm! Thank you DD!This is definitely a much better way of assigning event handlers.