Post
Ask Question

Dialog Boxes in JavaScript

Introduction

This article explains JavaScript dialog boxes. There are three essential dialog boxes in JavaScript. 

JavaScript Dialog Boxes in JavaScript

There are mainly 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 also get input from these dialog boxes. The following are the dialog boxes in JavaScript:

  1. Alert Dialog Box in JavaScript
  2. Prompt Dialog Box in JavaScript
  3. Confirmation Dialog Box in JavaScript

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

Alert Dialog Box in JavaScript

This dialog box is mainly used for validation. It displays a message in the dialog box. It is used for displaying error messages. This dialog box will block the browser. You cannot do anything on the browser page without pressing this dialog box's "OK" button; it is closed. 

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

Dialog Boxes in JavaScript

Prompt Dialog Box in JavaScript

It is the only dialog box that can get input from the user. This dialog box has two buttons, "OK" and "Cancel". Using this dialog box, you can get input from the user and 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, I used a prompt dialog box in the first statement, 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 the document.write();

Output

  1. First, the output is the prompt dialog box then a value is entered (you can provide a default value, here, I can provide "krishna").

    Dialog Boxes in JavaScript

  2. When you click on the "OK" button, it will show in the browser.

    Dialog Boxes in JavaScript

Confirmation Dialog Box in JavaScript

This dialog box is mainly used for confirming the user of specific actions. When you are exiting from a window, then it could request confirmation from the user, like "Do you 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 print on the browser.

Output

Dialog Boxes in JavaScript

  1. When the user clicks "OK" the output is as follows,

    message

  2. When the user clicks the "Cancel" the output is as follows,

    message box

Summary

I hope you understand the concept of dialog boxes in JavaScript. If you have any suggestions regarding this article, then please get in touch with me.


Similar Articles