Dialog Boxes in JavaScript

Introduction

In the previous chapter, we learned about Page Redirection in JavaScript with example programs.

In this article, we will learn about JavaScript dialog boxes and its types in JavaScript with an example program.

JavaScript Dialog Boxes

There are mostly three types of dialog boxes in JavaScript. They are used to either show confirmation messages, raise an error, or show a warning message. You can get input also from these dialog boxes. The following are the dialog boxes in JavaScript.

Types of Dialog Box

Alert Dialog Box
Prompt Dialog Box
Confirmation Dialog Box

Now you can learn about JavaScript dialog boxes one by one.

Alert Dialog Box

This dialog box is mostly used for validation. It displays a message in the dialog box. This dialog box will block the browser. You cannot do anything in the browser page without pressing the “OK” button of this dialog box, then it is closed. It is used for displaying error messages.

Example alert dialog box:

<!DOCTYPE html>
<html>
<title>JavaScript Dialog Box</title>
<head></head>
<body>
<script language="javascript">
alert("Hello, From C# Corner");
</script>
</body>

Output

Prompt Dialog Box

It is the only dialog box that can get input from the user. This dialog box has the two buttons “OK” and “Cancel”. Using this dialog box you can get input from the user then perform the operation you want on that input value. You can provide a default value for the prompt dialog box. The default value is “undefined”.

The following is an example of a prompt dialog box:

<!DOCTYPE html>
<html>
<title>JavaScript Dialog Box</title>
<head></head>
<body>
<script language="javascript">
var test = prompt("Welcome To Coding World, Enter Your Name:",”krishna”);
document.write("Welcome to C# Corner - " + test);
</script>
</body>
</html>

In the preceding example, in the first statement I used a prompt dialog box and got input from the user and stored it in a test variable. The second statement writes the user's input value to the browser using document.write();

Output

First, the output is the prompt dialog box then a value is entered (you can provide default value, here I can provide “krishna”).
When you click on the “OK” button it will show in the browser:

Confirmation Dialog Box

This dialog box is mostly used, for providing confirmation for the user of specific actions. When you are exiting from a window then it could request confirmation from the user, like “Do you really want to Exit?”, It displays two buttons on the dialog box: “OK” and “Cancel”. When you click the “OK” button it returns true otherwise it returns false.

The following is an example of a confirmation dialog box:

<!DOCTYPE html>
<html>
<title>JavaScript Dialog Box</title>
<head></head>
<body>
<script language="javascript">
var t = confirm("Do you really want to Exit?");
if(t == true)
{
document.write("Thanks for using");
}
else
{
document.write("Welcome To C# Corner");
}
</script>
</body>
</html>

In this example, the first statement requests confirmation from the user. It will check the user selection whether it is true or false and prints on the browser.

Output