Javascript Confirmation Dialog - Please Help

**me_myself** · 10-23-2008, 08:30 PM

I have a page with various logos of companies (vendors page) - when the user clicks on a logo, the corresponding company's website opens in a separate window. I want to have a javascript confirmation box before this. Once the user clicks on a logo, a box should appear with the message "You are about to leave the website, click OK to continue" - if he clicks OK, the corresponding website should be opened in a separate window. If he clicks Cancel, he should remain where he is.

How do i go about doing this. Please Help.

Thanks.

**Jesdisciple** · 10-24-2008, 12:12 AM

Code:

if(confirm('You are about to leave the website, click OK to continue')){
    window.open(...);
}

If you need more details, I do too. What's your current implementation, to start with?

**me_myself** · 10-27-2008, 08:06 PM

Jesdisciple, thanks for the post.

I created a .js file with 10 different functions:

Code:

function vendorlnk1()
{
if(confirm("You are about to leave the website. Click OK to continue"))
window.open ("http://www.company1.com/");
}

function vendorlnk2()
{
if(confirm("You are about to leave the website. Click OK to continue"))
window.open ("http://www.company2.com/");
}

Then in the html image map, i called the function as follows:

Code:

<img src="images/vendors.jpg" width="516" height="606" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="25,497,125,466" href="#" onclick="vendorslnk1();return false;" />
<area shape="rect" coords="15,235,133,387" href="#" onclick="vendorslnk2();return false;" />
</map>

The above seems to work in Firefox 3, but throws error in IE 7. Can you please check what i am doing wrong. Also please let me know if there is a better way of doing this.

Thanks a lot for the help.

**magicyte** · 10-27-2008, 10:19 PM

Doubt this'll work, but try to backspace these:

Code:

function vendorlnk1()
{
if(confirm("You are about to leave the website. Click OK to continue")) window.open ("http://www.company1.com/");
}

function vendorlnk2()
{
if(confirm("You are about to leave the website. Click OK to continue")) window.open ("http://www.company2.com/");
}

or do this:

Code:

<img src="images/vendors.jpg" width="516" height="606" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="25,497,125,466" href="#" onclick="vendorslnk1();return false;" ></area>
<area shape="rect" coords="15,235,133,387" href="#" onclick="vendorslnk2();return false;" ></area>
</map>

-magicyte

**Jesdisciple** · 10-27-2008, 10:34 PM

Now that I think about the situation more, you would be more accurate to say that the user is opening a popup (which some people find annoying) rather than leaving the website. After all, they will still have your website open but not in front.

EDIT: Sorry, I forgot about the IE error. What is the error's information?

This is a more compact, maintainable, and accessible way to do the same thing:

Code:

window.onload = function()
{
    var vendorLinks = document.getElementsByName('vendorlnk');
    for(var i = 0; i < vendorLinks.length; i++)
    {
        vendorLinks[i].onclick = vendorLink;
    }
    function vendorLink()
    {
        if(confirm("You are about to leave the website. Click OK to continue"))
            window.open(this.href);
        return false;
    }
};

HTML Code:

<img src="images/vendors.jpg" width="516" height="606" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="25,497,125,466" href="http://www.company1.com/" name="vendorlnk" />
<area shape="rect" coords="15,235,133,387" href="http://www.company2.com/" name="vendorlnk" />
</map>