Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

JavaScript Tip:
Involve Users With Dialog Boxes

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

  
March 2005
Vol. 8, No. 2
 • Promotion Tip
 • JavaScript Tip
 • Design Tip
  

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:

<a href='javascript:onClick=alert("This is a basic alert box!")'>View the alert box.</a>

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.

<a href="http://www.netmechanic.com/promote.htm" onClick="javascript:return confirm('Would you like to increase your search engine rank?')">Improve your site!</a>
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.

<a href='javascript:onClick=window.prompt("How many pet turtles do you have? Please enter a number from 1 to 25", "1")'>Test the Prompt box.</a>


Note that window.prompt has two parts:

prompt("message to be displayed","default value")
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.

<script language="javascript" type="text/javascript">
var yourName = prompt("Please enter your first name.", "Your Name Goes Here");
</script>

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.