PDA

View Full Version : 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
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:


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:



<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:


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:


<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:
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;
}
};


<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>

me_myself
10-28-2008, 02:19 PM
Jesdisciple, thanks for the script. Works great - no error. :)