JavaScript Dialog Boxes

Ranjit Powar
Jan 16, 2016
4.9k
0
0
Article

In programming languages dialog is used to give message to user, to confirm some activity or to get some values from 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:

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.

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

output

Confirm Dialog Box

Confirm dialog box used to get users confirmation to proceed for some activities like to redirect to next page or not. To show confirm dialog box “confirm ()” method is 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 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

output

If user clicks on “OK”, then confirm method return true as below.

output

Prompt Dialog Box

In many situations we want to take inputs from user, in this situation prompt dialog box is useful. This dialog box displayed with textbox to get input from user. This dialog box displayed using “prompt ()” method. This method takes two argument, first is argument displayed as label for input textbox and 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 user clicks “OK” the prompt method returns entered value, else if user clicks “Cancel”, then it returns null value.

Example