The Ugly JavaScript Book - Chapter Six

Chapter Six
Alert, Prompt and Confirm Boxes


JavaScript messages to the user (Dialog Boxes) are useful when you wish to prompt input from the visitor to your pages, or tell them that they've made a mistake, or to have them make a decision.
     For this purpose, you may make a call that causes a bell to sound and a dialog box to appear superimposed upon the present screen.
     The user may not proceed without responding to this dialog box in some fashion.
     There are three different kinds of dialog boxes you can cause to be displayed:

Alert Box

     The Alert box, which simply displays a message with an OK that the user must click to acknowledge having read it.

alert(variable);

     variable is the literal string or variable you have set to a string, or a combination of both, displayed to the user.
     The user may only click an OK button to close the dialog box.
     You can call the alert(); using an onClick= call in a form's button specification, as shown in the following example:


<HTML><HEAD>
<TITLE>Alert Dialog Box</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- Hide from JS-Impaired Browsers
function testIt(){
 str=document.forms[0].elements[0].value;
 /* First, if no entry, give an alert
    and then move cursor to form
    element with focus() call. */
 if (str.length<1){
  alert("Please enter a user name so"
  +" that we can continue");
  document.forms[0].elements[0].focus();
  }
 else{
 /* Next, if entry too short, give
    an alert and then move cursor to
    form element with focus() call,
    and then a select() call to
    highlight it. */
  if (str.length!=6){
   alert("Please enter a user name that"
   +" is exactly 6 characters long.");
   document.forms[0].elements[0].focus();
   document.forms[0].elements[0].select();
   }
  else{
   /* Process the rest of form here. Just
      so you can see it accepts 6 letter
      names, the next line is included in
      this script. */
   alert("You typed exactly six letters!"
   +" The name you entered is "+str);
   }
  }
 }
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER><P>
<B>JavaScript Alert Dialog Box</B>
<P><TABLE BORDER=0 WIDTH=490>
<TR><TD>Click the Submit button without typing a name, then type a name less than 6 characters, then one longer than 6 characters and finally one exactly six characters long, clicking on the Submit button after each.</TD></TR>
</TABLE>
<P><FORM>
Six Character User Name:
<INPUT TYPE=TEXT>
<INPUT TYPE=BUTTON VALUE=" Submit " onClick="testIt()">
</FORM>
</BODY>
</HTML>

Click Here to See Script.

Confirm Box

     The Confirm box, which gives the user an OK or Cancel option. If OK is clicked, something you specify happens, while Cancel can trigger another action or nothing at all, as you specify.

confirm(variable);

     variable is the literal string or variable you have set to a string, or a combination of both, displayed to the user.
     The user may click an OK button or a Cancel button to close the dialog box.
     You can call the confirm(); using an onClick= call in a form's pushbutton, as shown in the following example:


<HTML><HEAD>
<TITLE>Confirm Dialog Box</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- Hide from JS-Impaired Browsers
function checkIt(){
 str="Do you really want to go to the"
 +" home page?";
 /* Notice the syntax in the next
    conditional (if - then) statement.
    If the user clicks OK, it evaluates
    to "true", and the user is taken to
    the destination specified. You could
    also use if (confirm(str)==true) or
    if (confirm(str)==1) etc. */
 if (confirm(str)){
  location.href="homepage.htm";
  }
 }
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER>
<P><B>JavaScript Confirm Dialog Box</B>
<P>
<FORM>
<INPUT TYPE=BUTTON VALUE=" Go to Home Page"
 onClick="checkIt()">
</FORM>
</BODY>
</HTML>

Click Here to See Script.

Prompt Box

     The Prompt box, usually used when a form has been incompletely filled out, which accepts a direct correcting text entry from the user.
     You control what message is displayed in these dialog boxes, and where appropriate, what happens when they are responded to.

prompt(variable1,variable2 );

     variable1 is the literal string or variable you have set to a string, or a combination of both, displayed to the user.
     The user may type input into a form element in the dialog box, and click an OK button or a Cancel button to close the dialog box.
     variable2 is a default value you may specify to be displayed in the prompt box.


<HTML><HEAD>
<TITLE>Prompt Dialog Box</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- Hide from JS-Impaired Browsers
var shirts="";
function checkIt(){
 shirts=document.forms[0].elements[0].value;
 if (shirts==""){
  addIt();
  }
 }
 
function addIt(){
 str="How many shirts did you wish to"
 +" order?";
 shirts=12; // default value to display
 if (prompt(str,shirts)){
  document.forms[0].elements[0].value=shirts;
  }
 }
// End hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER>
<P><B>JavaScript Confirm Dialog Box</B>
<P>
<FORM>
Do not enter any value in the box below before submitting it.
<BR>Shirts: <INPUT TYPE=TEXT SIZE=10 VALUE="">
<BR>
<INPUT TYPE=BUTTON VALUE=" Submit " onClick="checkIt()">
</FORM>
</BODY>
</HTML>

Click Here to see this script.

Links: Introduction | Chapter One | Chapter Two | Chapter Three | Chapter Four | Chapter Five | Chapter Seven | Chapter Eight | Chapter Nine | Chapter Ten | Chapter Eleven | Chapter Twelve | Chapter Thirteen | Chapter Fourteen | Chapter Fifteen | Chapter Sixteen | Chapter Seventeen | Chapter Eighteen | Chapter Nineteen | Chapter Twenty | Chapter Twenty-one | Chapter Twenty-two | Chapter Twenty-three | Appendix A | Appendix B | Appendix C | Appendix D | Cover
This free virtual book provided courtesy of:
AutoScripter(tm), the site for professional Web Designers and Developers and
WebWalker Virtual Press, virtual publishing on the Web since 1994
Other free e-books from WebWalker: The All American Terrorists | The Gnomes of Jost | For the Love of Entropy | The Trees of Kratva | The Arch of Rain Magicians | Lightshow | The Black Mancutters Guild | The Septoracle

© Copyright 1997, 1999, 2000, 2001 John H. Keyes
editor@jorika.com