September 29, 1997
DR. WEBSITE: Submitting Forms Using Enter Key; How To Rotate Text
By David Fiedler and Scott Clark
Dear Dr. Website®: I've organized form fields neatly in a table, and now I would like to be
able to use the Enter key to submit the form. How can I do that?
In order for a form to be submitted when the Enter key is pressed, the form must contain
only one entry field. If there is more than one entry field (text, radio button, select, etc.),
then the submit() event must be called, either by the standard method--clicking on the
submit button--or through calling it by JavaScript's onClick, OnFocus, onChange, and
onBlur events, as is done in this example with two radio buttons:
<head>
<script language="JavaScript">
var msg ="I'm using JavaScript to create a confirmation message. Please tell me that's
okay!";
function confirmit(){
if(confirm(msg)==true){document.newsubmit.submit();}
else alert('Sorry, you can\'t play with us and have to leave right now!');
}
</script>
<title></title>
</head>
<body>
<form method="post" action="http://www.yourdomain.com/cgi-bin/doit.cgi"
name="newsubmit">
<input type=text name="save" size=35> <B>Name for File</b><br>
<input type=file name="uploadf" size=35 ><br>
<input type=radio onClick="confirmit();return false" name="doit"> Submit It Right Now!
<input type=radio onClick="alert('okay, we didn\'t want it anyway!')" name="doit"> I'd
rather not!
</form>
The above example depicts a form which is submitted using a radio button. The radio
button's onClick event calls the confirmit() function, which in turn submits the form.
This way, when a user has filled in the form and tabs to the first radio button, he can then
use the spacebar to submit the form. This would allow him to keep his hands on the
keyboard rather than having to use the mouse to click on a submit button.
This code also contains a confirmation/rejection message that pops up when the user tries to
submit the form, by using JavaScript confirm() and alert() methods within the confirmit()
function.
This can come in handy when you want to verify your users have read a release statement,
or remind them of some fact, or address additional issues before proceeding.
Text-Rotation Tips
Dear Dr. Website®:
How can I display rotated text in a browser? I want to create a table and
put text rotated 90 degrees in a column. Any ideas?
There are many things that HTML lets you do with text, but rotating it isn't yet one of
them. It does seem like a logical thing to do in many cases, especially where tables are
concerned, though. The amount of space on a Web page is fairly limited, so rotating a long
description can make your table look neater.
The easiest way to rotate text on a Web page is simply to create your text in a graphics
program, style and size it to match your Web page, rotate as necessary, and save it (as a
transparent GIF if necessary) so that the background will blend in with your page.
The GIF format is most efficient for this sort of artwork, in any case. Then, just take the
finished GIF file and work it into your table in the correct spot.
RELATED STORIES:
Webdeveloper.com's home page
Back to Home Page
Keywords:
html
Date:
19970929