Email conversation
| From | Jimoh Alabi |
|---|
| To | Me |
|---|
| Subject | Do you know how to make clicking the Enter key activate the default button in a Javascript form? |
|---|
| Date | 1 December 2007 19:35 |
|---|
Hi:
I was going through your Javascript tutorial articles at
http://www.howtocreate.co.uk/ and am currently using your DIV rewriting
technique (http://www.howtocreate.co.uk/jslibs/script-rewritediv) in a
project I have on hand -- thank you very much for that code! it really
helped me out of a tight jam -- but now I was wondering if you could
help me out with something else.
I have a form (the code for which is below) and it has two buttons, a
Submit button and a Reset button. The user enters text in the text
input box and then can either click the Submit button or the Reset
button in order to process the data entered.
My problem is, I want the code attached to the Submit button to be
executed if the user presses the Enter key. I've tried all sorts of
things, and no dice, and it's driving me crazy. Could you help?
Thanks in advance,
Eddie
Code for the form is below. Please note that the command buttons have
Javascript functions that fire when the appropriate button is clicked;
I didn't include those functions here for clarity.
<form name="frmMain">
<input type="text" name="txtInput" size=20 maxlength=50><br>
<input type="button" name="btnSubmit" value = "Submit"
onClick="javascript:doCalc(frmMain.txtInput.value);">
<input type="button" name="btnReset" value = "Reset"
onClick="javascript:doReset();">
<!-- force the output to be in a monospace font -->
<font size=2 face="Courier New">
<DIV id="divOutput1">
<iframe src="null.html" name="myFrame1" marginwidth="0"
marginheight="0" frameborder="0" height="100" width="200"
scrolling="no"></iframe>
</DIV>
<DIV id="divOutput2">
<iframe src="null.html" name="myFrame2" marginwidth="0"
marginheight="0" frameborder="0" height="100" width="200"
scrolling="no"></iframe>
</DIV>
<DIV id="divOutput3">
<iframe src="null.html" name="myFrame3" marginwidth="0"
marginheight="0" frameborder="0" height="100" width="200"
scrolling="no"></iframe>
</DIV>
<DIV id="divOutput4">
<iframe src="null.html" name="myFrame4" marginwidth="0"
marginheight="0" frameborder="0" height="100" width="200"
scrolling="no"></iframe>
</DIV>
<DIV id="divOutput5">
<iframe src="null.html" name="myFrame5" marginwidth="0"
marginheight="0" frameborder="0" height="100" width="200"
scrolling="no"></iframe>
</DIV>
</font>
</form>
| From | Me |
|---|
| To | Jimoh Alabi |
|---|
| Subject | Re: Do you know how to make clicking the Enter key activate the default button in a Javascript form? |
|---|
| Date | 2 December 2007 11:15 |
|---|
Eddie,
> My problem is, I want the code attached to the Submit button to be
> executed if the user presses the Enter key.
Use a real submit button, and most browsers will automatically press it when
the user presses the enter/return key in a text input. It will still fire
the JavaScript onclick event, as well as the onsubmit event on the form
itself, which will be run before it submits the form. It has the added
advantage that it also works if JavaScript is disabled (without whatever
calculations your script is doing).
As for the reset button (which should also be a real reset button, not a
scripted button), you may want to see the 'reset buttons' section on this
page: http://www.howtocreate.co.uk/tutorials/html/forms
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/