Dialog Boxes in JavaScript

Ranjit Powar 0 Comments
In this article, we learn various dialog boxes provided by JavaScript. In programming languages dialogs are used to give a message to the user, to confirm some activity or to get some values from the user. JavaScript also provides some dialog boxes. 

JavaScript language provides three types of dialog boxes as below.
  1. Alert Dialog Box
  2. Confirm Dialog Box
  3. Prompt Dialog Box


1. Alert Dialog Box:

Alert dialog box used to give simple friendlier messages to user. In some cases like in validation we want to give users an error message or after some activity we want to give successful complete message to users, in these situations we can use alert dialog box. To show alert dialog box “alert ()” method is used. This method takes one argument, which is displayed as message. Alert box give only one button “Ok” to select and proceed.

Ex:

<html>
<head>
    <script type="text/javascript">
        function ShowMessage() {
            alert("This is a alert message!");
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="Show Alert" onclick="ShowMessage();" />
    </form>
</body>
</html>

Output:








2. Confirm Dialog Box:

Confirm dialog box used to get users confirmation to proceed with some activities like to redirect to next page or not. To show confirm dialog box “confirm ()” method used. This method takes only one argument the message to be displayed on the confirm box. Confirm box has two buttons “Ok” and “Cancel”. Confirm return true or false. If the user clicks “Ok” button then confirm method returns true, and if a user clicks on "Cancel" then it returns false.

Ex: 

<html>
<head>
    <script type="text/javascript">
        function ShowMessage() {
            var retVal = confirm("Do you want to continue ?");
            document.getElementById("Result").innerHTML = retVal;
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="Show Alert" onclick="ShowMessage();" />
        <p id="Result" style="font-size:30px"></p>
    </form>
</body>
</html>
           

In this example the result is shown in <p> element. Means the returned value of confirm box is displayed in <p> element.

Output:









If the user clicks on "OK" then, confirm method return true as below.









3. Prompt Dialog Box:

In many situations, we want to take inputs from the user, in this situation prompt dialog box is useful. This dialog box displayed with a textbox to get input from the user. This dialog box displayed using “prompt ()” method. This method takes two arguments, first is argument displayed as the label for input textbox and the second one is default string to be displayed in the input textbox. Prompt dialog box displayed with one textbox and two buttons "Ok" and "Cancel". If the user clicks "Ok" the prompt method returns entered value, else if the user clicks "Cancel" then it returns a null value.

Ex: 

<html>
<head>
    <script type="text/javascript">
        function ShowMessage() {
            var retVal = prompt("Plese enter your name.");
            document.getElementById("Result").innerHTML = aretVal;
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="Show Alert" onclick="ShowMessage();" />
        <p id="Result" style="font-size:30px"></p>
    </form>
</body>
</html>

In this example, we prompt for the user to enter a name and then the entered name is displayed in the <p> element.

Output:

If user clicks on “OK” then name is displayed in <p> element.


Tags
Previous Post Next Post