JavaScript Confirm box

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

This tutorial is based around making a simple confirm box.

Code: [ Select ]
<!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>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <header>
  4. <script language="javascript" type="text/javascript">
  5. </script>
  6. </header>
  7. <body>
  8. <p>Use the button to display a confirm box.</p>
  9. <button onclick="confirmBox()">Click</button>
  10. <p id="confirm"></p>
  11. <script>
  12. function confirmBox()
  13. {
  14. var x;
  15. var r=confirm("Press a button!");
  16. if (r==true)
  17.  {
  18.  x="You pressed OK!";
  19.  }
  20. else
  21.  {
  22.  x="You pressed Cancel!";
  23.  }
  24. document.getElementById("confirm").innerHTML=x;
  25. }
  26. </script>
  27. </body>
  28. </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.
Code: [ Select ]
if (r==true)
 {
 x="You pressed OK!";
 }
else
 {
 x="You pressed Cancel!";
 }
  1. if (r==true)
  2.  {
  3.  x="You pressed OK!";
  4.  }
  5. else
  6.  {
  7.  x="You pressed Cancel!";
  8.  }

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.
Code: [ Select ]
x=window.location = "page1.html";


Your end result should look like this
Code: [ Select ]
<!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>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <header>
  4. <script language="javascript" type="text/javascript">
  5. </script>
  6. </header>
  7. <body>
  8. <p>Click the button to display a confirm box.</p>
  9. <button onclick="confirmBox()">Click</button>
  10. <p id="confirm"></p>
  11. <script>
  12. function confirmBox()
  13. {
  14. var x;
  15. var r=confirm("Do you agree to enter!");
  16. if (r==true)
  17.  {
  18.  x=window.location = "page1.html";
  19.  }
  20. else
  21.  {
  22.  x=window.location = "page2.html";
  23.  }
  24. document.getElementById("confirm").innerHTML=x;
  25. }
  26. </script>
  27. </body>
  28. </html>


Now that you have the building blocks you can alter the code and bind it to your needs.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Austin80ss
  • Beginner
  • Beginner
  • Austin80ss
  • Posts: 42

Post 3+ Months Ago

Thank you, it was helpful to me.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

Austin80ss wrote:
Thank you, it was helpful to me.


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

Post Information

  • Total Posts in this topic: 3 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 7 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.