This tutorial is based around making a simple confirm box.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<script language="javascript" type="text/javascript">
</script>
</header>
<body>
<p>Use the button to display a confirm box.</p>

<button onclick="confirmBox()">Click</button>

<p id="confirm"></p>

<script>
function confirmBox()
{
var x;
var r=confirm("Press a button!");
if (r==true)
  {
  x="You pressed OK!";
  }
else
  {
  x="You pressed Cancel!";
  }
document.getElementById("confirm").innerHTML=x;
}
</script>

</body>
</html>

As you can see here that you have used a pop up function and applied it to a button with a text return for a answer. But what if we want to change the o.k/cancel buttons to redirection back to the home page or store.

if (r==true)
  {
  x="You pressed OK!";
  }
else
  {
  x="You pressed Cancel!";
  }

in between the brackets we have conditions for what is to happen and right now they are set to phase text as a return.

by using a "window.location" function we can request the active window to go to a location.

x=window.location = "page1.html";

Your end result should look like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<script language="javascript" type="text/javascript">
</script>
</header>
<body>
<p>Click the button to display a confirm box.</p>

<button onclick="confirmBox()">Click</button>

<p id="confirm"></p>

<script>
function confirmBox()
{
var x;
var r=confirm("Do you agree to enter!");
if (r==true)
  {
  x=window.location = "page1.html";
  }
else
  {
  x=window.location = "page2.html";
  }
document.getElementById("confirm").innerHTML=x;
}
</script>

</body>
</html>

Now that you have the building blocks you can alter the code and bind it to your needs.

This page was published on

0

2 Comments

  • Votes
  • Oldest
  • Latest
AU

Thank you, it was helpful to me.

add a comment
0
ZE

Thank you, it was helpful to me.

np at all, should be enough to show you how to apply the function.

add a comment
0