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
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 ...
JavaScript Alert Popup Demo
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 ...
- JavaScript Alert Popup Demo
There is no return value from a JavaScript Alert call ...
The Confirm Dialog Box
24-Oct-2008: Script updated to deal with cross-browser issues.
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 ...
JavaScript Confirm Popup Demo
Markup for the form that displays the returned value from the confirm ...
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 ...
- JavaScript Confirm Popup Demo
the last returned value from your Confirm Popup Demo ...
The Prompt Dialog Box
24-Oct-2008: Script updated to deal with cross-browser issues.
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 ...
JavaScript Prompt Popup Demo
Markup for the form that displays the returned value from the prompt ...
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 ...
- JavaScript Prompt Popup Demo
the last returned value from your Prompt Popup Demo ...
