Home > DeveloperSection > Articles > JavaScript Dialog boxes

JavaScript Dialog boxes


JavaScript JavaScript 
Ratings:
0 Comment(s)
 4097  View(s)
Rate this:

JavaScript Dialog boxes

Introduction:

In this article I am going to explain you about the dialog box which is available in Java Script and how to use it. Java Script provides us three types of dialog boxes. These dialog boxes are used to take input from user or to get confirmation for any input or to alert the user if some error occurs.

The three types of dialog box available are:

1)      Alert dialog box.

2)      Confirmation dialog box.

3)      Prompt dialog box.

 

I am going to give explanation of Alert dialog box. What is alert dialog box and when to use it?

                Alert dialog box: It is used to show a message in the dialog box, and there is an OK button. It simply displays the message in the dialog box. It is supported by all major browsers.

Syntax :

                Alert (Message)      //Here message can be any group of strings.

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script type="text/javascript">

        alert("This is a alert box");

    </script>

</head>

<body>

</body>

</html>

 

Output Window:

JavaScript Dialog boxes

Confirmation Dialog box:  A Confirmation dialog box is used to take a consent from the user, there are two button OK and CANCEL if user click on the OK button confirm() will return true else it will return false.

 

 

html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script type="text/javascript">

        function confirmation() {

            var confirmvalue = confirm("This is a confirmation dialog box");

            if (confirmvalue == true) {

                alert("User want to continue");

                return true;

            }

            else {

                alert("User wants to discontinue");

                return false;

            }

        }

    </script>

</head>

<body>

    <div>

        <input id="btnConfirmation" type="button" value="Press for check confirmation" onclick="confirmation();" />

    </div>

</body>

</html>

 

 

JavaScript Dialog boxes

 

JavaScript Dialog boxes

 

In this example we are storing the value of confirm in the variable confirm value and check whether the value of a variable is true or false, if it is true then in the alert box the message will be displayed that User want to continue else it in an alert box we will get the message that Users want to discontinue.

 

Prompt Dialog box:

Prompt Dialog box is very useful to interact with the user. When we want some input from user then we can use prompt Dialog box, and user can fill values in the textbox. This dialog box contains two button OK and CANCEL, if the user clicks on the OK button then the prompt() method will return the entered value in the textbox if he clicks on the CANCEL button then prompt() method will return null value.

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script type="text/javascript">

        var value = prompt("Enter your name: ", "Enter your name");

        alert("You name is : " + value);

    </script>

</head>

</html>

 

 

The prompt dialog is displayed using the prompt() method.  First one is for the label we want to display in the text box and second one is for the default value in the text box.

JavaScript Dialog boxes

 

It will display the name in the alert box like this:

JavaScript Dialog boxes

Conclusion:

So now I conclude here, through this article we came to know about the dialog boxes which are provided by Java Script to us and how to use those dialog boxes.


Don't want to miss updates? Please click the below button!

Follow MindStick