JavaScript Alert, Prompt and Confirm Popup Boxes

JavaScript is one of the most popular and modern scripting language used in web development. It is used for implementing various functionalities of HTML and CSS code to make dynamic and interactive web pages. Few such features are JavaScript Alert, Prompt and Conform popup boxes.

Scripting allows coding to handle user actions on the web page. JavaScript code is included in <SCRIPT>…….</SCRIPT> tags to add scripts in any HTML document.

A JavaScript file exclusively containing JavaScript code can be included in an HTML page using src attribute in the Script tag. Such an external file must be stored with ‘.js’ extension.

It is done like this

 <SCRIPT src=“…./_path_.”> 

JavaScript follows object oriented approach in an HTML/CSS project that enables an extended functionality in HTML based web pages.

JavaScript Alert, Prompt and Conform popup boxes are used to show a specific message or alert. It is displayed via a small popup message window that appears on the browser once it is activated with a user action.

This post discusses the windows popup methods available in JavaScript.

JavaScript Alert Box

An alert box is a small window that is meant to alert a user about something happened. alert() method is used to show a popup message on a web browser. JavaScript alert() method is one of the most used popup box methods in JavaScript.

For example: alert() can be used to alert the user if a wrong input is given in an HTML form element. 

Syntax

alert(string);

A string argument is passed to the alert function. It is displayed in the alert window popup

Example

alert("Do you really want to leave this page?"); 
alert("Incorrect Email");

JavaScript Prompt Box

A prompt box is often used to get the input from the users in a popup box. When a prompt box pops up, the user must click either OK or Cancel to proceed after entering the input value inside the prompt box.

If the user clicks OK, the box will return the input value from the Prompt box. If the user clicks cancel then the box will return a null value to the calling statement. 

The prompt() method can take in two parameters. The first one is known as label that indicates that what the user should input into the prompt box. The second is an optional parameter that can be used to display a default string inside the text box.

We can add multiple functionalities and actions to the alert box as well. The prompt() method will enable the user to input text or number into the alert box.

Syntax

Var var-name=prompt(label,[default value])

Examples

var name = prompt("Enter your name");
alert(name);

var name = prompt("Enter your name","David");
alert(name);

JavaScript Confirm box

A confirm box can be used for the various purposes like verification or acceptance of some task. When a confirm box pops up, the user is given an option to accept or cancel it according to the message written in the confirm box.

Similar to the prompt box, if the user clicks on OK, the box returns  true else the box returns false. A confirm box can made active by providing confirm() method for any click or action in a web browser.

An example for the same is mentioned here. The following example can be used in form validation to tell the user to check the responses before finally submitting a form.

Syntax

var result-variable= confirm(string)

Example

var result = confirm("Do you want to submit this form");
if (result == true) {
  alert("Thanks for filling information");
}
else {
  alert("Fill Again");
}

So, these are the JavaScript support to allow your users to interact with your website. You can enhance the appeal of your website with apt messages and prompts.

Saket Dawgotra