WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (1/8)

[next]

Beyond HTML Goodies, chapter 6

Helpful Forms

It isn't just important that your forms look good; they also need to provide a service and be helpful for the viewer. This chapter provides the following tips and tricks to enhance your forms to make the user feel better about him or herself:

Submit When Finished
Passing Variables with Forms and JavaScript
Limiting Check Box Choices
Select Boxes: If This . . . Then This
Copy to Clipboard
Select Box Links Menu
Hidden Password Protection
Array Password Protection

Submit When Finished

Okay, form fans, this is one that you've been requesting for a long time now. It's not that I've been ignoring your requests, it's just that . . . well . . . okay, I've been ignoring your requests. Sorry! I'm on it now.

Here's the concept: You have a form. You ask your user to fill it in and then submit it. Many of you want the form to submit all by itself when the user presses Enter. I never saw any great benefit to this as part of a guest book form. There are too many items to fill in, and what if the user fills in the last item out of order? Then you'd get a half-finished form submitted. That's not good.

You can find this tutorial, and all of its examples, online at https://www.htmlgoodies.com/beyond/submitwhendone.html.

You can download just the examples at https://www.htmlgoodies.com/wpg/.

I'm presenting this tutorial as a single form element submit, like a database search or a simple email or name submit. You can see those all over the place now because everyone wants to put out a newsletter, including me. The single form element is there to capture the user's email to add it to the list of those getting the newsletter.

Simple Submit Form Figure 6.1
This is the basic form you'll get. Notice that there is no Submit button.

The Code

The code is a short form coupled with an even shorter JavaScript. It looks like this:

<SCRIPT LANGUAGE="javascript">
function send()
{document.theform.submit()}
</SCRIPT>
<FORM NAME="theform" METHOD="post" 
ACTION="mailto:[email protected]" ENCTYPE="text/plain">
<b>Submit your Name:</b>
<INPUT TYPE="text" name="mardi" size="30" 
MAXLENGTH="30" onUnfocus="send()">
</FORM>

The Form Code

We'll start with the form code.

The form code is no different than any other form you've created before. The form tag offers a NAME, a METHOD, and then the ACTION. I have this one set to work as a simple mailto: form, but it can just as easily work by attaching the output to a CGI. Just put the path to the CGI right there after the ACTION, like you normally would. The name of the form is "theform". How's that for originality, huh?

The INPUT TYPE is a text box. Its NAME is "mardi". It's set to a size of 30 and a maxlength of 30.

The next snippet of text is the clincher. See that onUnfocus="send()"? That's what triggers the JavaScript to run and send the form.

The form, of course, wraps up with the required </FORM> tag.

The JavaScript Code

Here it is one more time:

<SCRIPT LANGUAGE="javascript">
function send()
{document.theform.submit()}
</SCRIPT>

The script is super simple. It's a function triggered by the onUnfocus Event Handler in the form element. Remember that? The command onUnfocus works when focus is taken off an element. You probably could have guessed that. What is the movement that takes focus away from the form element? Why, it's the user pressing Enter. See how it all works?

After focus has been put on and then taken off the text box, the line document.theform.submit() fires up. This is the hierarchy line that takes the content of something called "theform" and submits it as if you clicked a submit button.

That's really all there is to it.

You can pretty much plop this on your page anywhere you want it, but I would suggest putting the function up in the head commands if you can.

This is a clever trick, but remember that you might run into trouble if you use it as part of a larger script. Stick with single elements like I showed previously, and you'll do just fine.