Java Script:Dialog Boxes and Prompts

Dialog Boxes and Prompts

Dialog boxes are used to raise an alert, or to get confirmation on any action or to take small amount of input from the users. JavaScript supports three important types of dialog boxes: The alert, confirm and prompt dialog boxes. These dialog boxes appear as separate windows and their content is independent from the text in html page and does not affect the content of the page. The three types of dialog boxes provided by JavaScript are:

Alert Dialog Box:

An alert dialog box is mostly used to give a warning message to the users. Like if one input field requires to enter some text but user does not enter that field then as a part of validation you can use alert box to give warning message. An alert dialog box is invoked using the alert() method, which takes a string as argument and displays it in the dialog box. In addition to the string, it also displays an OK button. Once the dialog box is displayed, the JavaScript and HTML code stops processing until the OK button is pressed.

Syntax:

alert(“<Message>”);

Example:

alert(“Welcome to my Webpage”);

Prompt Dialog Box:

The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus it enables you to interact with the user. The prompt() method instantiates the prompt dialog box. It displays a specified message and also provides a single data entry field, which accepts the user input.

The prompt() method takes two parameters (i) A label which you want to display in the text box (ii) A default string to display in the text box.

Syntax:

prompt(“<Message>”, “<Default text>”);

Example:

prompt(“Enter your favourite colour”, “Red”);

Prompt dialog box has two buttons: OK and Cancel. If the user clicks on OK button the prompt() will return entered value from the text box. If the user clicks on the Cancel prompt() returns null.

You can use prompt dialog box as follows:

Confirmation Dialog Box:

A confirmation dialog box is mostly used to take user's consent on any action. The confirm() method displays a dialog box with a predefined message and two buttons: OK and Cancel.

Syntax:

confirm(“<Message>”);

Example:

confirm(“Are you sure you want to quit?”);

If the user clicks on OK button the window method confirm() will return true. If the user clicks on the Cancel button confirm() returns false.