Alerts, Confirmations, and Prompts

Browsers have a few predefined window methods that enable you to display dialog boxes: alert , confirm , and prompt . The alert method just displays an alert dialog box with a message:

 window.alert([  msg  ])

Here, msg is a string that specifies the message to display in the dialog box. We've already seen how to use alert boxes as far back as Chapter 1, "Essential JavaScript;" here's Listing 01-03.html on the web site, which displays an alert box when a page loads:

 <HTML>      <HEAD>          <TITLE>              Executing Scripts After a Document Loads          </TITLE>  <SCRIPT LANGUAGE="JavaScript">   <!--   function alerter()   {   window.alert("All loaded.")   }   // -->   </SCRIPT>   </HEAD>   <BODY ONLOAD="alerter()">  <H1>Executing Scripts After a Document Loads</H1>      </BODY>  </HTML>

You can see the results of this code in Figure 8.1, where you see that the alert displays only an OK button to let the user acknowledge the message.

Figure 8.1. Displaying an alert box.

graphics/08fig01.gif

The confirm method enables the user to click an OK button to confirm a message or Cancel to deny it. Here's how you use this method:

  answerBoolean  = window.confirm([  msg  ])

The msg argument is the text displayed in the confirm box. This method returns true if the user clicked the OK button, and false if the user clicked the Cancel button. Here's an example that displays a confirm box asking whether the user wants a greeting, and if so, writes Hello! to the page:

(Listing 08-01.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using the confirm Method</TITLE>      </HEAD>      <BODY>          <H1>Using the confirm Method</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--  if(confirm("Do you want a greeting?")){   document.write("Hello!")  }              // -->          </SCRIPT>      </BODY>  </HTML>

You can see the confirm box in Figure 8.2, and the results in Figure 8.3 if you click the OK button.

Figure 8.2. Displaying a confirm box.

graphics/08fig02.gif

Figure 8.3. Using data from a confirm box.

graphics/08fig03.gif

The prompt method displays a prompt to the user and accepts typed text, returning that text. Here's how you use this method:

 text = window.prompt([  msg  [,  defaultValue  ]])

Here, msg is a string that specifies the message to display in the dialog box (by default, this is set to "" ), and defaultValue is a string that specifies the default value of the input text field (by default, this parameter is set to "undefined" ). H ere's an example using the prompt method, letting the user enter his own name (the default name here is Ralph):

(Listing 08-02.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using the prompt Method</TITLE>      </HEAD>      <BODY>          <H1>Using the prompt Method</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--  document.write("Hello " + prompt("What is your name?", "Ralph") + "!")  // -->          </SCRIPT>      </BODY>  </HTML>

You can see the prompt box in Figure 8.4, and the results in Figure 8.5 after I've entered Steve and clicked the OK button.

Figure 8.4. Displaying a prompt box.

graphics/08fig04.gif

Figure 8.5. Using data from a prompt box.

graphics/08fig05.gif