javascript Confirmation Boxes

JavaScript Confirmation BoxesA 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.barbie.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.barbie.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, give it a try!

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...

Well, that does it for now. Let's go check out the next section, Browser Detection with JavaScript.


Close    To Top
  • Prev Article-Web Design:
  • Next Article-Web Design:
  • Now: Tutorial for Web and Software Design > Web Design > JavaScript > Web Design Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction