Alert Confirm Prompt JavaScript Popups
The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
JavaScript Alert - JavaScript Confirm - JavaScript Prompt
Alert Confirm Primpt
Browser Popup Dialog Boxes
Best viewed at 1024 x 768 using a colour depth greater than 256

JavaScript Alert Confirm Prompt

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Popup Boxes Overview ...

24-Oct-2014: The JavaScript on this page has been updated to reflect modern scripting techniques.

Popup dialog boxes, not to be confused with popup windows, can add interaction to a Web page and there are three types of inbuilt popup dialog boxes available in JavaScript. This JavaScript popups tutorial explores and demonstrates the usage of each of the three types of dialog boxes which are the alert, confirm and prompt, and they are all methods of the JavaScript Window object. In simple terms this means that JavaScript has three inbuilt functions that provide different types of browser popups which are designed to provide different types of interaction between a user and a web page.

This page includes detailed scripting examples which makes it an ideal tutorial for those of you who are new to JavaScript and we have also included a special section at the bottom of the page that explains where and how you can locate a JavaScript section on your web page. The scripts on this page are all cross-browser compatible and should work fine in any JavaScript enabled browser.

This JavaScript tutorial includes a practical demonstration of each type of HTML pop up dialog box and these demonstrations can be activated by clicking on the Dialog Demo link in each section. In the case of the confirm and prompt demos we have gone further than other similar tutorials and provided a facility that displays the actual values returned by the dialog boxes. This enables you to check the different return values if for example a user clicks 'OK' -v- 'Cancel'. This feature should make this tutorial useful to the more advanced JavaScript scripter.

Remember: Markup goes into the BODY of your page and Scripts
go into the JavaScript Section, located in the HEAD of your page ...

The Alert Dialog Box

 
Image of a JavaScript Alert Popup Box

The JavaScript Alert is the simplest and the most often used of the three available JavaScript pop-up dialog boxes. It's one simple job is to display a message to the user. When the browser reaches the point in the script that triggers the Alert, the Alert popup box is displayed on the screen and all other operations are suspended until the user confirms they have read the message by clicking the 'OK' button. It is obviously useful for displaying a message to the user but it is also very useful for debugging JavaScript scripts. You place it inline in the script you are developing and use it to display the value of variables, form input fields, etc.

There are many different ways you can call an Alert but we are going to use a JavaScript link that calls a JavaScript function called 'javascript_alert_demo', which in turn will prepare and call the Alert built-in function. You should note that an Alert requires one argument (the message) and it returns no value.

Markup for a link that calls the 'javascript_alert_demo' function ...

<div onclick="javascript_alert_demo()">JavaScript Alert Popup Demo</div>

Script for the 'javascript_alert_demo' function ...

function javascript_alert_demo() {
	
	// ALERTS REQUIRE ONE ARGUMENT
	var message = "Remember to log out before exiting...";

	// ALERTS DO NOT RETURN A VALUE
	// ALERTS ARE INFORMATIONAL ONLY
	alert (message);
}

Click this link for a demonstration ...

There is no return value from a JavaScript Alert call ...

 

The Confirm Dialog Box

24-Oct-2014: Script updated to deal with cross-browser issues.

Image of a JavaScript Confirm Popup Box

The JavaScript Confirm is similar to an Alert in that it accepts one argument (the message) but instead of just having an 'OK' button it has both an 'OK' button and a 'Cancel' button. This allows you to ask the user Yes|No type questions and then make your script branch according to the users response. When the browser reaches the point in the script that calls the Confirm, the Confirm box is displayed on the screen and all other operations are suspended until the user reacts to the Confirm.

To enable you test a users response a Confirm returns a boolean 'true' if the user clicks 'OK' or types 'Return' and it returns a boolean 'false' if the user clicks 'Cancel' or types 'Escape'. Again, we have used a JavaScript link, this time to call a JavaScript function called 'javascript_confirm_demo' which in turn will prepare and call the Confirm built-in function and then deal with the returned value.

Markup for a link that calls the 'javascript_confirm_demo' function ...

<div onclick="javascript_confirm_demo('confirmDisplay')">JavaScript Confirm Popup Demo</div>

Markup for the form that displays the returned value from the confirm ...

<form id="confirmDisplay" action="#" onsubmit="return false">
<div><input type="text" name="return_value" value="" size="20" /></div>
</form>

Script for the 'javascript_confirm_demo' function ...

function javascript_confirm_demo(formID) {

	if (document.getElementById(formID)) {
		var form = document.getElementById(formID);
	} else {
		return;
	}

	// CONFIRM REQUIRES ONE ARGUMENT
	var message = "Please confirm it is OK to proceed...";

	// CONFIRM IS BOOLEAN. THAT MEANS THAT
	// IT RETURNS TRUE IF 'OK' IS CLICKED
	// OTHERWISE IT RETURN FALSE
	var return_value = confirm(message);

	// DISPLAY THE RETURNED VALUE IN THE
	// CONFIRM POPUP DEMO TEXT INPUT BOX
	form.return_value.value = return_value;

	// TEST TO SEE IF TRUE|FALSE RETURNED
	if ( return_value === true ) {
		// YOUR 'OK' SCRIPT GOES HERE
		yourOkFunction();
	} else {
		// YOUR 'CANCEL' SCRIPT GOES HERE
		yourCancelFunction();
	}
}

click this link for a demonstration ...

the last returned value from your Confirm Popup Demo ...

 

The Prompt Dialog Box

24-Oct-2014: Script updated to deal with cross-browser issues.

Image of a JavaScript Prompt Popup Box

The JavaScript Prompt is the most complex of the three JavaScript popup dialog boxes in that it requires two arguments and returns two different classes of response. The first argument is the message that is to be displayed to the user and in our example we have specified 'Please Enter Your Correct Name'. The second argument is the current (starting) value of the input line and in our example we have specified 'Mary'. The idea of the example is that if the users name is not Mary then we are inviting the user to edit the input box and enter their correct name. If you don't require a starting value for the input line then you should set the second argument to an empty string (e.g. var user_name = ""). Do not ignore the second argument otherwise the starting value of the input line will be 'undefined'.

The two classes of response that are returned by a JavaScript Prompt are a null string if the user clicks 'Cancel' or types 'Escape' and a valid string containing the text from the input line if the user clicks 'OK' or types 'Return'. If there is no text on the input line when the user clicks 'OK' or types 'Return' then an empty 'valid' string is returned.

As with the other JavaScript popups, when the browser reaches the point in the script that calls the Prompt, the Prompt popup box is displayed on the screen and all other operations are suspended until the user reacts to the Prompt. Yet again we have used a JavaScript link, this time to call a JavaScript function called 'javascript_prompt_demo' which in turn will prepare and call the Prompt built-in function and then deal with the returned values.

Markup for the link that calls the 'javascript_prompt_demo' function ...

<div onclick="javascript_prompt_demo('promptDisplay');">JavaScript Prompt Popup Demo</div>

Markup for the form that displays the returned value from the prompt ...

<form id="promptDisplay" action="#" onsubmit="return false">
<div><input type="text" name="return_value" value="Test" size="20" /></div>
</form>

Script for the 'javascript_prompt_demo' function ...

function javascript_prompt_demo(formID) {

	if (document.getElementById(formID)) {
		form = document.getElementById(formID);
	} else {
		return;
	}

	// PROMPTS REQUIRE TWO ARGUMENTS
	var message = "Please enter your first name...";
	var user_name;
	if (form.return_value.value.length > 0) {
		user_name = form.return_value.value;
	} else {
		user_name = "Mary";
	}

	// PROMPTS RETURN TWO POSSIBLE VALUES
	// IF THE USER TYPES ESCAPE OR CLICKS CANCEL
	//	THE RETURN VALUE IS NULL
	// IF THE USER TYPES RETURN OR CLICKS OK
	//	THE INPUT LINE STRING IS RETURNED
	var return_value = prompt(message,user_name);

	// DISPLAY THE RETURNED VALUE IN THE
	// PROMPT DEMO TEXT INPUT BOX
	if (return_value !== null) {
		form.return_value.value = return_value;
	}

	// TEST TO SEE IF NULL OR STRING RETURNED
	if (return_value !== null) {
		// YOUR 'OK' SCRIPT GOES HERE
		yourOkFunction();
	} else {
		// YOUR 'CANCEL' SCRIPT GOES HERE
		yourCancelFunction();
	}
}

click this link for a demonstration ...

the last returned value from your Prompt Popup Demo ...

 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - JavaScript Popup Boxes Learn how to use the JavaScript Alert, Confirm and Prompt popup dialogue boxes. This tutorial includes an interactive demonstration of each of the popups and is ideal if you are new to JavaScript.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
JavaScript Alert/Confirm/Prompt Links
 
 
 
 
 
Browser Popup Dialog Boxes
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England