using javascript to open link in centered popup window based on dropdown box selection

Question

I am looking for a solution that will allow me to combine two scripts and have them working together in a cross-browser friendly manner and comply with XHTML 1.0 Transitional standards.

First script is open file/location based on dropdown selection.

Here's the script:

<script type="text/javascript">
//<![CDATA[
<!--
function go(){ 
if (document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value != "none") { 
location = document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value 
    } 
} 
//-->
//]]>
</script> 

Here's the markup:

<form name="fooform">
<select name="fooselect">
   <option selected="selected" value="#">Select a file</option>
   <option value="pdfs/somefile1.pdf">file 1</option>
   <option value="pdfs/somefile2.pdf">file 2</option>
   <option value="pdfs/somefile3.pdf">file 3</option>
   <option value="pdfs/somefile4.pdf">file 4</option>
 </select>
   <input onclick="go()" type="button" value="Get PDF" />
</form>

pretty straight-forward...

The second script is ofcourse, as the title states, one that opens a centered popup.

Here's the script:

<script type="text/javascript">
//<![CDATA[
<!--
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
//-->
//]]>
</script>

Here's the markup:

<input onclick="PopupCenter('http://www.stackoverflow.com', 'popfoo',400,400);" type="button" value="Open Center Popup" />

So my challenge is to create a script that when the user clicks the "Get PDF" button, a centered popup opens containing the PDF file, and that PDF file will change depending on the option they chose from the dropdown list.

I'm going to have multiple dropdowns on the page, so most likely the scripts will change from document.fooform.fooselect.options to document.form1.select1.options, document.form2.select2.options, etc...and functions will be like go1(), go2(), etc...

Any help/tips/suggestions are greatly appreciated!

UPDATE Thu, November 22nd, 2012

I've thought about sacrificing the centered popup feature in lieu of just getting this script to open the PDF in a new window, so far I've attempted:

<input type="button" value="Get PDF" onclick="window.open(go().href); return false;" />

as well as

<input type="button" value="Get PDF" onclick="window.open(go(), 'USER GUIDE', 'width=500,height=300');" />

but both of these inputs simply open the PDF in the same window and that's what I'm trying to avoid.

And if I simply try merging the two above scripts like so:

<script type="text/javascript">
//<![CDATA[
<!--
function PopupCenter(pageURL, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    var top = (screen.height / 2) - (h / 2);
    var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    }

    var go = function go() { 
if (document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value != "none") { 
location = document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value 
    } 
} 
//-->
//]]>
</script> 

and then use the following input trigger:

<input onclick="PopupCenter('go()', 'popfoo',400,400);" type="button" value="Get PDF" />

or

<input onclick="PopupCenter('go', 'popfoo',400,400);" type="button" value="Get PDF" />

I get error message:

Windows Internet Explorer

Cannot find 'file:///W:/test/go()'. Make sure the path or Internet address is correct.

[OK]

or

Windows Internet Explorer

Cannot find 'file:///W:/test/go'. Make sure the path or Internet address is correct.

[OK]

and if I try without the single quotes in the input like so

<input onclick="PopupCenter(go(), 'popfoo',400,400);" type="button" value="Get PDF" />

I get the error message:

Windows Internet Explorer

Cannot find 'file:///W:/test/undefined'. Make sure the path or Internet address is correct.

[OK]

and then the PDF opens in the same window after I click OK on the error message.

Please help!! Many thanks in advance :)

UPDATE 2 Thu, November 22nd, 2012

Got it working in IE (only, unfortunately) in this fiddle

Basically changed then location = document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value and declared location as a variable (which I believe is a not a good idea since location is a global variable - if someone could shed some light on that, it would be great) and then added the line window.open(location)

Would like to get it cross browser friendly and hopefully get some help tweeking the new window call (would still like to center it and preferably strip some unneeded things out of the new window like the toolbar, statusbar, etc etc)

Thanks in advance!

Answer 1

Doesn't center the popup, but does what I need (primarily) to do. See jsfiddle http://jsfiddle.net/77buX/

<!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" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>test</title>
    </head>
    <body>
        <script type="text/javascript">
            var UG1 = function getUG1() {
                if (document.form1.select1.options[document.form1.select1.selectedIndex].value != "none") {
                    var location = document.form1.select1.options[document.form1.select1.selectedIndex].value;
                    window.open(location)
                }
            }

            var UG2 = function getUG2() {
                if (document.form2.select2.options[document.form2.select2.selectedIndex].value != "none") {
                    var location = document.form2.select2.options[document.form2.select2.selectedIndex].value;
                    window.open(location)
                }
            }
        </script>
        <form action="" name="form1">
            <p class="clear">
                <select name="select1" style="width: 10.5em">
                    <option selected="selected" value="#">Select a user guide</option>
                    <option value="http://manuals.info.apple.com/en_US/ipad_user_guide.pdf">ipad user guide</option>
                    <option value="http://manuals.info.apple.com/en_US/iphone_user_guide.pdf">iphone user guide</option>
                </select>
                <input onclick="getUG1()" type="button" value="Get PDF" />
            </p>
        </form>
        <br />
        <br />
        <form action="" name="form2">
            <p class="clear">
                <select name="select2" style="width: 10.5em">
                    <option selected="selected" value="#">Select a user guide</option>
                    <option value="http://docs.blackberry.com/en/smartphone_users/deliverables/1202/userguide_bb8330_cdma.pdf">blackberry 8330 user guide</option>
                    <option value="http://cb.vu/unixtoolbox.pdf">unix toolbox</option>
                </select>
                <input onclick="getUG2()" type="button" value="Get PDF" />
            </p>
        </form>
    </body>

</html>​