JavaScript Tip:
Involve Users With Dialog Boxes

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Even if you can't define the term "dialog box," we're pretty sure you'd recognize one if you saw it.

JavaScript dialog boxes can hold any message you want. Everything from the beginner's "Hello World!" message to really important stuff like "We can't process your order without a valid credit card number." Visitors are more likely to pay attention and respond to these messages if you use them correctly and make the text as easy to read as possible.

Alert Boxes Help Correct Input Errors

An alert box is a small dialog box that gives the user important information about the Web page or the action just completed. The most common use is to inform (or alert) the user to input or processing errors.

Alert boxes are particularly useful in client-side form validation. Use JavaScript to check for required fields or incorrect entries, then open one or more alert boxes to explain the problem to the user.

The alert box relies on the JavaScript onClick event handler, which works both with a mouse click and the keyboard ENTER key.

Here's a simple alert box script:

And here's how it looks on a Web page:

Some designers over-use the alert box, which can be seriously annoying for visitors. At some point, you've probably visited a site that popped up this kind of message when you tried to leave:

Bottom line: use alert boxes for their intended purpose: to alert visitors to problems and briefly explain how to correct them.

The Alert event is also an excellent debugging tool. Insert different Alert messages inside a complex JavaScript application and then run the script. You'll be able to more easily identify the problem because you can tell just where the script stopped working.

Confirm Boxes. Are you really sure you want to do this?

The second type of dialog box is the "confirm box." The user must agree before the action is completed. You'll often see this used before the application performs a task that cannot be easily reversed - like charging your credit card or deleting a file. Adult content sites use it to try and filter out underage visitors.

Although it is possible to use almost the same syntax as for the Alert dialog box, that code isn't very helpful:

<a href='javascript:onClick=window.confirm("Are you SURE you want to reformat your hard drive?")'>Select this link</a>.

Be brave, click on the link and select the "yes" answer. You'll have to use your browser's BACK button to return to this article.

See? The script as written just returns a blank page that says you clicked "yes" or "true." That's no good. And it didn't even touch your hard drive!

So use this script instead. The JavaScript syntax is a bit more complicated but it lets you plan for two different answers: yes or no.

When you click on this link, a "yes" answer takes you to the confirmation page and a "no" answer does nothing. That comes from using the "return confirm" phrase. If the user doesn't agree, nothing happens.

Try this and use your BACK button to return to this article.

The Confirm dialog box is an excellent way to give visitors more control and let them have a second chance to consider their options.

Collect Small Amounts Of Data With Prompt Boxes

A "prompt box" asks the user for some small bit of information that's necessary to complete the task. Common uses include:

• Passwords - Users must enter the correct password information to go deeper into the site or access certain information.
• Form completion - Prompts the user to enter required information.
• Page personalization - Ask the user their name or other personal data, store it in a variable, and use it to present customized page content.

Prompt boxes are extremely useful and versatile tools, but use them with care. The user should only be asked to enter a short word or numeric answer to a simple question. Don't ask questions that might get a multiple sentence or multiple line response.

As with the Confirm box, you can write some extremely simple code - but it's not too useful. Try this and use your BACK button to return to this article.

Note that window.prompt has two parts:

You don't have to enter a default value, but if you leave it blank, JavaScript will display the value "undefined" in the prompt box.

Now let's create a prompt box that passes the value to a variable and inserts it into page text.

Place this code in the HEAD section of your document.

Then, include the variable called "yourName" inside the text wherever you want it using a document.write statement:

Hello <script language="javascript">document.write(yourName)</script>! It's so nice to have you back.

By the way, <script language="javascript">document.write(yourName)</script>, we have several sale items you may be interested in�.

Here's how it looks on this example page

Note that the page opens a JavaScript pop-up window. You may have to instruct your pop-up blocker to accept it if you don't see the window when you click the link. For more information about creating JavaScript pop-ups, see our April, 2001 JavaScript Tip: Put Your Window Where You Want It.