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 It was last revised on
