JavaScript Dialog Boxes

Introduction

In programming languages dialog is 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:

Alert Dialog Box
Confirm Dialog Box
Prompt Dialog Box

Alert Dialog Box

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

Alert box gives only one button “Ok” to select and proceed.

Example

<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

Confirm Dialog Box

Confirm dialog box used to get users confirmation to proceed for some activities like to redirect to the next page or not. To show confirm dialog box “confirm ()” method is used. This method takes only one argument for 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 the “OK” button, then confirm method returns true, and if the user clicks on “Cancel”, then it return false.

Example

<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.

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. The 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.

Example

<html>
<head>
<script type="text/javascript">
function ShowMessage()
{
var retVal = prompt("Plese enter your name.");
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, we prompt for the user to enter the name and then the entered name is displayed in <p> element.

Output

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

8 Comments

Join the conversation! Your thoughts help the community grow.

Ranjit Powar10y ago
Thanks ankit
Ankit Bansal10y ago
Really helpful..
Ranjit Powar10y ago
Thanks
Santhakumar Munuswamy10y ago
Thanks for nice share
Ranjit Powar10y ago
Thanks gowtham
Gowtham K10y ago
Good One Ranjit, Thanks for sharing:)
Ranjit Powar10y ago
Thanks
Sthitaprajnya Debasis Nayak10y ago
Nice Article!!!