Lesson-11 (Confirmation Boxes)

 

A javascript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. A confirmation box will pop up much like an alert box, but will allow the viewer to press an "OK" or "Cancel" button. Here is the basic command for creating a confirmation box:

confirm("Text or question you want to use");

The trouble is, if you use just that it isn't very useful. The confirmation box will return a value of true or false, so this is what we must use to make use of the confirmation box. An easy way to get the value for later use is to assign it to a variable, like this:

var where_to= confirm("Do you really want to go to this page??");

Now, you can use the where_to variable to send the user to one page or another, depending on the value the confirmation box returned. You can do this with an if/else block:

if (where_to== true)

 {

   window.location="http://yourplace.com/yourpage.htm";

 }

else

 {

  window.location="http://www.abc.com";

  }

In this case, if the viewer hits the "OK" button, the browser will go to your special page. If the viewer hits the cancel button, the browser takes the viewer on a fun trip to the Barbie web site!

To make use of it though, you'll probably want to write a JavaScript function in your head section that you can call in the body of the page. You could place the items above into a function like this, to go inside your head tags:

<SCRIPT language="JavaScript">

<!--

function go_there()

{

 var where_to= confirm("Do you really want to go to this page??");

 if (where_to== true)

 {

   window.location="http://yourplace.com/yourpage.htm";

 }

 else

 {

  window.location="http://www.abc.com";

  }

}

//-->

</SCRIPT>

Now, you need to find a way to call the function inside the body of your document so that you can offer the viewer access to the special page. You can use a button to call the function when it is clicked, so you would place something like this in the body section:

To go to my special page, click the button below:

<BR>

<FORM>

<INPUT TYPE="button" value="Go!" onClick="go_there()">

</FORM>

This would work like the example button below, give it a try!

To go to my special page, click the button below:

As you can see, this may come in handy for something you want to code down the line. Of course, I can't confirm that...