Javascript Dialog Boxes

Many times you experience Javascript dialog boxes while visiting websites. Sometimes dialog box may used to display warning message, for confirmation message and to get user information with "Ok", "Ok" and "Cancel" button.

Three Types of Dialog Boxes Available

  • Alert dialog box
  • Confirmation dialog box
  • Prompt dialog box

Some Other Dialog Boxes Available

  • Print dialog
  • Find dialog

Alert Dialog Box

It is used to show a message in the dialog box, and there is an OK button. It is mostly used to prompt message if user missed input value or invalid data in given form or text. It is supported by all major browsers.

Javascript Alert Dialog Box Example

<html>
<head>
<title>Javascript Alert Dialog Box Example</title>
</head>
<body>
<form name="myform">
<input type="button" value="Alert Dialog Try It" 
onClick="alert('Hello from TechStrikers!')"/>
</form>
</body>
</html>

Confirm Dialog Box

It is used to show a message box with "Ok" and "Cancel" button. It is mostly used to take user confirmation on any option. Confirm displays a dialog box with two buttons: OK and Cancel. If the user clicks on OK the window method confirm() will return true. If the user clicks on the Cancel button confirm() returns false.

Javascript Confirm Dialog Box Example

<html>
<head>
<title>Javascript Confirm Dialog Box Example</title>
<SCRIPT LANGUAGE="JavaScript">
function respConfirm () {
     var response = confirm('Please confirm, you want to continue?');
     if (response) alert("Your response was OK!");
     else alert("Your response was Cancel!");
}
</SCRIPT>
</head>
<body>
<form name="myform">
<input type=button value="Confirm Dialog Try It" 
onClick="respConfirm();"/>
</form>
</body>
</html>

Prompt Dialog Box

The prompt dialog box are most commonly used to allow user to inter information. It takes two parameters; a message which you want to display in the text box and default string for the text entry field. Prompt dialog box has two buttons: OK and Cancel. If the user types something and then clicks OK or presses Enter, the prompt method returns the user input string. If the user clicks OK or presses Enter without typing anything into the prompt dialog, the method returns the suggested input, as specified in the second argument passed to prompt. If the user dismisses the dialog (e.g. by clicking Cancel or pressing Esc), then in most browsers the prompt method returns null.

Javascript Prompt Dialog Box Example

<html>
<head>
<title>Javascript Prompt Dialog Box Example</title>
<SCRIPT LANGUAGE="JavaScript">
function respPrompt() {
     var siteName = prompt('What is your web site name?', 'www.TechStrikers.com');
     if (favorite) alert("Your web site name is: " +  siteName);
     else alert("You pressed Cancel or no value was entered!");
}
</SCRIPT>
</head>
<body>
<form name="myform">
<input type=button value="Prompt Dailog Try It" 
onClick="respConfirm();"/>
</form>
</body>
</html>

Print Dialog Box

Javascript allow you to open print dialog box using window.print() method to print your web page. However, the users has option to print out everything on the web page, including the output of JavaScript programs, by using the File -> Print menu of the browser window(e.g. Ctrl+P on Windows systems).

Javascript Print Dialog Box Example

<html>
<head>
<title>Javascript Print Dialog Box Example</title>
</head>
<body>
<form name="myform">
<input type=button value="Print Dailog Try It" 
onClick="window.print();"/>
</form>
</body>
</html>

Find Dialog Box

Find dialog not supported by all the browsers. Firefox and some Gecko browsers, you can display the browser's Find dialog by calling window.find('search text',0,0,0,0,0,1) with the last (seventh) parameter true or 1. In Netscape Navigator and Firefox, you can also use the window.find() method without parameters.

Javascript Find Dialog Box Example

<html>
<head>
<title>Javascript Find Dialog Box Example</title>
</head>
<body>
<form name="myform">
<input type=button value="Find Dialog Without Parameter"
onclick="if(window.find)window.find();
else 
alert('Your browser does not support \'window.find()\'!')"/>

<input type=button value="Find Dialog With Parameter"
onclick="if(window.find) window.find('Search Text',0,0,0,0,0,1);
else 
alert('Your browser does not support \'window.find()\'!')"/>

</form>
</body>
</html>