JavaScript supports
three important types of dialog boxes. These dialog boxes can be used to raise
and alert, or to get confirmation on any input or to have a kind of input from
the users. Here we will discuss each dialog box one by one.
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
Click the following button to see the result:
Click Me
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
Click the following button to see the result:
Click Me
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
Click the following button to see the result:
Click Me
0 comments:
Post a Comment