Scribd
Upload
12 views3 pages

10 - JS - Dialog Boxes

The document explains three types of JavaScript dialog boxes: alert, confirmation, and prompt. An alert dialog box displays a warning message with an 'OK' button, a confirmation dialog box asks for user consent with 'OK' and 'Cancel' buttons, and a prompt dialog box requests user input with a text field and 'OK' and 'Cancel' buttons. Each type is illustrated with example HTML and JavaScript code snippets.

Uploaded by

Chenuka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views3 pages

10 - JS - Dialog Boxes

The document explains three types of JavaScript dialog boxes: alert, confirmation, and prompt. An alert dialog box displays a warning message with an 'OK' button, a confirmation dialog box asks for user consent with 'OK' and 'Cancel' buttons, and a prompt dialog box requests user input with a text field and 'OK' and 'Cancel' buttons. Each type is illustrated with example HTML and JavaScript code snippets.

Uploaded by

Chenuka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

JavaScript - Dialog Boxes

Alert Dialog Box


An alert dialog box is mostly used to give a warning message to the users. For example,
if one input field requires to enter some text but the user does not provide any input, then
as a part of validation, you can use an alert box to give a warning message.
Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only
one button "OK" to select and proceed.
Example
<html>
<head>
<script type = "text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>

<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick =
"Warn();" />
</form>
</body>
</html>
Output
Confirmation Dialog Box
A confirmation dialog box is mostly used to take user's consent on any option. It displays
a dialog box with two buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm() will return true. If the
user clicks on the Cancel button, then confirm() returns false. You can use a
confirmation dialog box as follows.
Example
<html>
<head>
<script type = "text/javascript">
<!--
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to
continue!");
return false;
}
}
//-->
</script>
</head>

<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick =
"getConfirmation();" />
</form>
</body>
</html>
Output
Prompt Dialog Box
The prompt dialog box is very useful when you want to pop-up a text box to get user
input. Thus, it enables you to interact with the user. The user needs to fill in the field and
then click OK.
This dialog box is displayed using a method called prompt() which takes two
parameters: (i) a label which you want to display in the text box and (ii) a default string
to display in the text box.
This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the
window method prompt() will return the entered value from the text box. If the user clicks
the Cancel button, the window method prompt() returns null.
Example
The following example shows how to use a prompt dialog box −
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var retVal = prompt("Enter your name : ", "your name
here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>

<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick =
"getValue();" />
</form>
</body>
</html>
Output

You might also like