Prompt Boxes

A simple way of getting user input into a script is through a prompt box. The prompt() method displays a dialog box with an input area into which information can be typed. The user then submits this information to a script by clicking an "OK" button, or cancels the input by clicking a "Cancel" button. The general format for the prompt() method is shown below.

variable = [window.]prompt("prompt message", "initial text")

Figure 3-24. General format for prompt() method.

The prompt() method requires two string values coded inside the parentheses and separated by a comma. The first string is the prompt message that is displayed to solicit user input. The second string is the initial text (if any) that appears inside the input area. This initial message can represent a default value or a suggested entry. To leave the input area blank, code a null value ("") as the initial text.

The value that the user types into the prompt box is returned to the script. Therefore, this text string must be assigned to a variable in order to capture it.

The following script presents a prompt box that solicits the user's name and then displays that name in an alert box.

window.onload = init;

function init() {
  var ShowPrompt = document.getElementById("ShowPrompt");
  ShowPrompt.onclick = GetName;
}

function GetName() {
  var Input = prompt("What is your first name?", "");
  alert("Hello, " + Input & ".");
}

<input type="button" value="Show Prompt" id="ShowPrompt">

Listing 3-18. Using a prompt box.

When the "OK" button is clicked, the typed value is returned to the script. If no value is typed, no value is returned and the variable is empty. When the user clicks "Cancel," a null value is returned and any text typed in the input area is ignored. You will notice that if you click "Cancel" in the above example, the alert box displays "Hello, null."

The prompt box returns a typed value, an empty value, or a null value. Although these various input situations are not dealt with individually in the previous script, scripts should take them into account. For instance, processing of the response should not proceed until a valid entry is submitted; or if the "Cancel" button is clicked, an alert message should not display the null value. Later, you will learn how to script for these situations.

For now, the following script is an example in which the prompt box is repeatedly displayed until the user enters a value or clicks the "Cancel" button. Just clicking the "OK" button without entering a value redisplays the prompt box.

window.onload = init;

function init() {
  var ShowPrompt = document.getElementById("ShowPrompt");
  ShowPrompt.onclick = GetName;
}

function GetName() {
  do {
    var Input = prompt("What is your first name?", "Enter your name here");
  } while (Input == "Enter your name here")
  if (Input != null) {
    alert("Hello, " + Input + ".");
  }
}

<input type="button" value="Show Prompt" id="ShowPrompt">

Listing 3-19. Code to test and respond to prompt box conditions.

TOP | NEXT: Confirm Boxes