Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS alert box with new window

    Hello,
    I'm trying to create an alert box from an image button that says something like "You are now leaving...do you want to continue?" I'd like an OK and a Cancel button and if the user clicks OK, it opens a new browser with the URL that the button was going to. And if the user cancels, it just closes the alert box.
    Any ideas how to accomplish this?

  • #2
    New Coder
    Join Date
    Dec 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    use a confirm box:

    Code:
    <script type="text/javascript">
    function confirm_leave()
    {
    input_box=confirm("Click OK to continue or Cancel to stay here");
    if (input_box==true)
    { 
    // Output when OK is clicked
    }
    
    else
    {
    // Output when Cancel is clicked
    }
    }
    </script>

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you konithomimo.

    what about the script on the button itself?

  • #4
    New Coder mentalhorse's Avatar
    Join Date
    Jul 2005
    Location
    Duanesburg, NY
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Put this in any element that fires a onClick event.
    onClick="confirm_leave()">Whatever
    Why is a raven like a writing desk?

  • #5
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works like a charm! Thank you konithomimo and mentalhorse for your help!

  • #6
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops, one more thing. When I hit Cancel, it still opens a new browser. Is there code that I can place in the Else statement that tells it to do nothing?

  • #7
    New Coder
    Join Date
    Dec 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It depends on how your code is set up. Post it here and we will see.

  • #8
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the total code:

    <head>

    <script type="text/javascript">
    function confirm_leave()
    {
    input_box=confirm("Click OK to continue or Cancel to stay here");
    if (input_box==true)
    {
    // Output when OK is clicked
    }
    else
    {
    // Output when Cancel is clicked
    }
    }
    </script>

    </head>

    <body>
    <a href="http://www.amazon.com" target="_blank" onClick="confirm_leave()"><img src="image/photo1.jpg" width="50" height="10" border="0"></a>
    </body>

  • #9
    New Coder
    Join Date
    Dec 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the following:

    <a href="http://www.amazon.com" target="_blank"

    should be:

    <a href="#"

    and then your script should be:
    Code:
    <script type="text/javascript">
    function confirm_leave()
    {
    input_box=confirm("Click OK to continue or Cancel to stay here");
    if (input_box==true)
    { 
    window.location.href = "http://www.amazon.com";
    }
    else
    {
    return false;
    }
    }
    </script>

  • #10
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You would think that should do the trick but I'm getting different issues now. The Ok button opens the new browser window for Amazon.com underneath the page already opened. And the Cancel button still opens another browser window. This new window is the same as the window already opened.

    Here's the total code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>

    <script type="text/javascript">
    function confirm_leave()
    {
    input_box=confirm("Click OK to continue or Cancel to stay here");
    if (input_box==true)
    {
    window.location.href = "http://www.amazon.com";
    }
    else
    {
    return false;
    }
    }
    </script>

    </head>

    <body>
    <a href="#" target="_blank" onClick="confirm_leave()"><img src="images/photo1.jpg" border="0"></a>
    </body>
    </html>

  • #11
    New Coder
    Join Date
    Dec 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Remove:

    target="_blank"

    Also, you can change the window.location.href line to open up a popup. that should fix everything.

  • #12
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool, that seemed to do the trick. I replaced the window.location.href with popup = window.open("http://www.amazon.com", 'popup') and it looks like it's working. Thanks konithomimo for all your help! That was very nice of you.

  • #13
    New Coder
    Join Date
    Dec 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no problem. If you need any more help, feel free to ask. I spend more time at the JS section of WebDevelopers though.

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    This is the better solution as the link is still navigable even if javascript is disabled.
    Code:
    <a href="http://www.amazon.com" target="_blank" onClick="return confirm('Are you sure?');"><img src="image/photo1.jpg" width="50" height="10" border="0"></a>
    And the code is even shorter and simpler.


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •