Back To Javascript Tutorials

JavaScript Confirm box

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Offline

Post September 15th, 2012, 8:29 pm

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>
  10. <button onclick="confirmBox()">Click</button>
  12. <p id="confirm"></p>
  14. <script>
  15. function confirmBox()
  16. {
  17. var x;
  18. var r=confirm("Press a button!");
  19. if (r==true)
  20.  {
  21.  x="You pressed OK!";
  22.  }
  23. else
  24.  {
  25.  x="You pressed Cancel!";
  26.  }
  27. document.getElementById("confirm").innerHTML=x;
  28. }
  29. </script>
  31. </body>
  32. </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>
  10. <button onclick="confirmBox()">Click</button>
  12. <p id="confirm"></p>
  14. <script>
  15. function confirmBox()
  16. {
  17. var x;
  18. var r=confirm("Do you agree to enter!");
  19. if (r==true)
  20.  {
  21.  x=window.location = "page1.html";
  22.  }
  23. else
  24.  {
  25.  x=window.location = "page2.html";
  26.  }
  27. document.getElementById("confirm").innerHTML=x;
  28. }
  29. </script>
  31. </body>
  32. </html>


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

Post September 15th, 2012, 8:29 pm

  • Austin80ss
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Oct 17, 2012
  • Posts: 41
  • Status: Offline

Post October 19th, 2012, 1:57 am

Thank you, it was helpful to me.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Offline

Post October 20th, 2012, 5:07 am

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


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

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 3 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.