Learn Alerts, Confirm and Prompt in JavaScript with examples.

Table of Contents

JavaScript programming allows 3 types of pop-up boxes or dialog boxes. Each one has a different function. Here is the list of popup boxes.

Alert boxes
Confirm boxes
Prompts

Alert Boxes

Alert boxes give immediate feedback to the user. There are many reasons to provide an alert message to users.

To give them some information
Give warning
Error reporting
A message about success

When a user gets an alert, he or she can click “OK” to continue working on another part of the browser. As long as an alert is displayed, it forces users to read the messages and other browser components are hidden.

Syntax:

alert ("This is an example alert");

Confirm Boxes

When you want users to accept something use a confirm box. This box is used for critical operations like deleting a file, saving a file, etc. It requires user confirmation to avoid accidental change or deletion.

Confirm boxes have two options – OK and Cancel. The OK returns “true” and Cancel returns “false”.

Syntax:

confirm ("Do you wish to proceed?");

Prompts

A prompt allows users to provide input for manipulation. When users create events like clicking a button, page load, etc. A prompt will pop-up and ask for user input. Users can click OK after providing their inputs.

Syntax:

prompt ("Enter a number"," ");

The value from prompt is captured in a JavaScript. You can use this value in a JavaScript function, a variable or directly use the value to do something meaningful.

Example Program – Alert, Confirm and Prompt

We will create a JavaScript file called alert.js and an HTML document called Ex08.html and verify the output for three JavaScript pop-up boxes.

Before you start the exercise, create a new folder – Exercise 08. When you create JavaScript file and HTML document, save it in this folder.

Note: If you place it in a different folder. The example code given below will not work. Both files must be in the same directory.

JavaScript File – Alert.js

Create the JavaScript file – Alert.js using following instructions.

Step 1: Open a notepad and save it as Alert.txt file.
Step 2: Insert the following code in Alert.txt and save it as Alert.js inside the Example 08 folder.

function alert_box()
{
    alert("This is an alert box!");
}
function confirm_box()
{
    var r = confirm("Press a button");

    if(r == true)
    {
        alert("That was OK");
    }
    else
    {
        alert("That was cancel");
    }
}
function prompt_box()
{
    var name = prompt("Please enter your name","Name");
    if(name!=null && name!= " ")
    {
        document.write("Hello" + " " + name 
        + " " + "Thank You!");
    }
}

Step 3: Close the file.

Now, it’s time to create an HTML page and link the JavaScript file to the HTML page.

Note:- You can also create an inline script within the HTML document. If you want to do this, then put JavaScript code between <script> …</script> element inside <head>… </head> element.

The HTML file-Ex08.html

The step-by-step instructions to create an HTML file-Ex08.html is given below.

Step 1: Open a notepad and save it as Ex08.txt.

Step 2: Insert the following HTML code.

<!DOCTYPE html>
<html>
     <head>
          <title>Show Alert</title>
     </head>
<body>
<p><em>This is demo for showing JavaScript Pop up.</p></em>
<frameset>
   <legend>JavaScript Examples</legend>
     <input type="button" onclick="alert_box()" value="show alert box"/>
     <input type="button" onclick="confirm_box()" value="show confirm box"/>
     <input type="button" onclick="prompt_box()" value="show prompt box"/>
</frameset>
</body>
</html>

Step 3: Add the following line of JavaScript code to link the HTML page with JavaScript file. Remember that alert.js files and HTML page should be inside same folder.

<!DOCTYPE html>
<html>
<head>
<title>Show Alert</title>
<script type="text/javascript" src="Alert.js"></script>
</head
     <body>
          <p><em>This is demo for showing JavaScript Pop up.</em></p>
          <fieldset>
               <legend>JavaScript Examples</legend>
               <input type="button" onclick="alert_box()" value="show alert box"/>
               <input type="button" onclick="confirm_box()" value="show confirm box"/>
               <input type="button" onclick="prompt_box()" value="show prompt box"/>
           </fieldset>
     </body>
</html>

Output to the Browser

The output of the program is given below. The HTML page shows three buttons one for each type of JavaScript pop-up box. When a user clicks the button, it will create an event called onclick(). As a result, the respective pop-up code is executed and output is displayed on the browser.