There are dialog boxes that can be used to raise an alert ,to give any confirmation or to give any tool tip.There are three type of dialog boxes:
- Alert dialog box
- Confirmation dialog box
- Prompt dialog box
Alert Dialog Box: It is used to give warning message to the user. For example if any input-field require input in combination of text and integer, but user is inputting only text value,then as a part of validation,we can use an alert dialog box to give alert message.It has ‘OK’ button on it click and continue the process.
Example:
<html>
<head>
<script type = "text/javascript">
<!--
function alertbox() {
alert ("This is validation check!");
document.write ("Warning Message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see alert box </p>
<form>
<input type = "button" value = "Click" onclick = "alertbox();" />
</form>
</body>
</html>
Confirmation Dialog Box: This dialog box is use to take confirmation from user.It has two buttons on it one is ‘OK’ and another is ‘Cancel’.If user press ‘Ok’ button, then method return true value otherwise false.
Example:
<html>
<head>
<script type = "text/javascript">
<!--
function ConfirmationBox() {
var retVal = confirm("Do you want to submit ?");
if( retVal == true ) {
document.write ("Submitted successfully");
return true;
} else {
document.write ("Stay on same page");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button </p>
<form>
<input type = "button" value = "Submit" onclick = "ConfirmationBox();" />
</form>
</body>
</html>
Prompt Dialog Box: A prompt box is used if we want the user to input a value.When a prompt box pops up, the user will have to either fill the field and click “OK” or “Cancel” to proceed.
If the user clicks the OK button, the method will return the entered value from the text box. If the user clicks the Cancel button, the method returns null.
Example:
<html>
<head>
<script type = "text/javascript">
<!--
function get() {
var put = prompt("Enter your first name : ", "first name");
document.write("First Name : " + put);
}
//-->
</script>
</head>
<body>
<p>Click the following button </p>
<form>
<input type = "button" value = "Click Me" onclick = "get();" />
</form>
</body>
</html>