ug6.htm

Chapter Six
Alert, Prompt and Confirm Boxes

JavaScript Messages to the User (Dialog Boxes)

There are many times when you wish to prompt input from the visitor to your pages, or tell them that they've made a mistake, or to have them make a decision.

For this purpose, you may make a call that causes a bell to sound and a dialog box to appear superimposed upon the present screen.

The user may not proceed without responding to this dialog box in some fashion.

There are three different kinds of dialog boxes you can cause to be displayed:

The Alert box, which simply displays a message with an OK that the user must click to acknowledge having read it.

alert(variable);

variable is the literal string or variable you have set to a string, or a combination of both, displayed to the user.

The user may only click an OK button to close the dialog box.

You can call the alert(); using an onClick= call in a form's button specification, as shown in the following example:

<HTML><HEAD>

<TITLE>Alert Dialog Box</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide from JS-Impaired Browsers

function testIt(){

str=document.ug.ly.value;

/* First, if no entry, give an alert

and then move cursor to form

element with focus() call. */

if (str.length<1){

alert("Please enter a user name so"

+" that we can continue");

document.ug.ly.focus();

}

else{

/* Next, if entry too short, give

an alert and then move cursor to

form element with focus() call,

and then a select() call to

highlight it. */

if (str.length!=6){

alert("Please enter a user name that"

+" is exactly 6 characters long.");

document.ug.ly.focus();

document.ug.ly.select();

}

else{

/* Process the rest of form here. Just

so you can see it accepts 6 letter

names, the next line is included in

this script. */

alert("You typed exactly six letters!"

+" The name you entered is "+str);

}

// End Hiding -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR="white">

<CENTER><P>

<B>JavaScript Alert Dialog Box</B>

<P><TABLE BORDER=0 WIDTH=490>

<TR><TD>Click the Submit button without typing a name, then type a name less than 6 characters, then one longer than 6 characters and finally one exactly six characters long, clicking on the Submit button after each.</TD></TR>

</TABLE>

<P><FORM NAME="ug">

Six Character User Name:

<INPUT TYPE="text" NAME="ly">

<INPUT TYPE="button" NAME="but"

VALUE=" Submit " onClick="testIt()">

</FORM>

</BODY>

</HTML>

Click Here to See Script.

The Confirm box, which gives the user a Yes or No option. If Yes is clicked, something you specify happens, while No can trigger another action or nothing at all, as you specify.

confirm(variable);

variable is the literal string or variable you have set to a string, or a combination of both, displayed to the user.

The user may click a Yes button or a No button to close the dialog box.

You can call the confirm(); using an onClick= call in a form's pushbutton, as shown in the following example:

<HTML><HEAD>

<TITLE>Confirm Dialog Box</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide from JS-Impaired Browsers

function checkIt(){

str="Do you really want to go to the"

+" home page?";

/* Notice the syntax in the next

conditional (if - then) statement.

If the user clicks OK, it evaluates

to "true", and the user is taken to

the destination specified. You could

also use if (confirm(str)==true) or

if (confirm(str)==1) etc. */

if (confirm(str)){

location.href="homepage.htm";

}

// End Hiding -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR="white">

<CENTER>

<P><B>JavaScript Confirm Dialog Box</B>

<P>

<FORM NAME="ug">

<INPUT TYPE="button"

VALUE=" Go to Home Page"

onClick="checkIt()">

</FORM>

</BODY>

</HTML>

Click Here to See Script.

The Prompt box, usually used when a form has been incompletely filled out, which accepts a direct correcting text entry from the user.

You control what message is displayed in these dialog boxes, and where appropriate, what happens when they are responded to.

prompt(variable1,variable2 );

variable1 is the literal string or variable you have set to a string, or a combination of both, displayed to the user.

The user may type input into a form element in the dialog box, and click an OK button or a Cancel button to close the dialog box.

variable2 is a default value you may specify to be displayed in the prompt box.

<HTML><HEAD>

<TITLE>Prompt Dialog Box</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide from JS-Impaired Browsers

var shirts="";

function checkIt(){

shirts=document.ug.ly.value;

if (shirts==""){

addIt();

}

function addIt(){

str="How many shirts did you wish to"

+" order?";

shirts=12; // default value to display

if (prompt(str,shirts)){

document.ug.ly.value=shirts;

}

// End hiding -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR="white">

<CENTER>

<P><B>JavaScript Confirm Dialog Box</B>

<P>

<FORM NAME="ug">

Do not enter any value in the box below before submitting it.

<BR>Shirts: <INPUT TYPE="text" NAME="ly" SIZE=10 VALUE="">

<BR>

<INPUT TYPE="button" VALUE=" Submit "

onClick="checkIt()">

</FORM>

</BODY>

</HTML>

Click Here to see this script.