?
Solved

Open Window Based On Select Box Choice

Posted on 2005-03-10
23
Medium Priority
?
297 Views
Last Modified: 2009-04-22
Okay i want to use a select box to open different windows based on the users choice from the select options. For example if they select Window1 it will open a popup window with the page window1.cfm , if window2 is selected window2.cfm etc...

<select name="action">
   <option value="" selected>Please Select</option>
   <option value="Window1">Window1</option>
   <option value="Windows2">Window2</option>
</select>

i use a function for popup windows at the minute

function openPopup(url,name,wid,hght) {
     windowFeatures ="menubar=no,scrollbars=yes,location=no,favorites=no,resizable=no,status=no,toolbar=no,directories=no";
     width=wid;
     height=hght;
      // Centralize the popup window.
      winLeft = (screen.width-width)/2;
     winTop = (screen.height-(height+110))/2;
     window.open(url, name, "width="+width+",height="+height+",left=" + winLeft + ",top=" + winTop + ","+windowFeatures);
     }

and call it by

onclick="return!openPopup('/window1.cfm?', 'window1',800,600)"

How do incorporate this into my situation above ??

Cheers

JT
0
Comment
Question by:jturkington
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 6
  • 4
  • +1
23 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13504231
<html>
<head>
<script>
function openPopup(url,name,wid,hght) {
    if(url.length==0)return;
     windowFeatures ="menubar=no,scrollbars=yes,location=no,favorites=no,resizable=no,status=no,toolbar=no,directories=no";
     width=wid;
     height=hght;
      // Centralize the popup window.
      winLeft = (screen.width-width)/2;
     winTop = (screen.height-(height+110))/2;
     window.open(url, name, "width="+width+",height="+height+",left=" + winLeft + ",top=" + winTop + ","+windowFeatures);
     }
</script>


</head>
<body>
<form>
<select name="action" onchange="openPopup(this.options[this.selectedIndex].value)">
   <option value="" selected>Please Select</option>
   <option value="window1.cfm">Window1</option>
   <option value="window2.cfm">Window2</option>
</select>

</form>
</body>

0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504236
Or with a button:

<html>
<head>
<script>
function openPopup(url,name,wid,hght) {
    if(url.length==0)return;
     windowFeatures ="menubar=no,scrollbars=yes,location=no,favorites=no,resizable=no,status=no,toolbar=no,directories=no";
     width=wid;
     height=hght;
      // Centralize the popup window.
      winLeft = (screen.width-width)/2;
     winTop = (screen.height-(height+110))/2;
     window.open(url, name, "width="+width+",height="+height+",left=" + winLeft + ",top=" + winTop + ","+windowFeatures);
     }
</script>


</head>
<body>
<form>
<select name="action">
   <option value="" selected>Please Select</option>
   <option value="window1.cfm">Window1</option>
   <option value="window2.cfm">Window2</option>
</select>
<input type="button" value="Go" onclick="openPopup(document.forms[0].action.options[document.forms[0].action.selectedIndex].value)">
</form>
</body>

0
 
LVL 33

Expert Comment

by:sajuks
ID: 13504251
<select name="action" onchange ="return openPopup('/' +this.options[this.selectedIndex].text +'.cfm?', 'window1',800,600)">
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jturkington
ID: 13504270
is there any issues if i need to append variables to the form name ??

<option value="window1.cfm?contactid=#getusers.contactid#&contactname=#getusers.contactid#">Window1</option>

Cheers

JT
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504276
No it should work fine

0
 
LVL 33

Expert Comment

by:sajuks
ID: 13504278
Nope its an accepted way to pass varaibles
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504282
The only thing is that # is the anchor sign.

You might want to drop that from the url. Just add it on the next page instead.
0
 
LVL 30

Expert Comment

by:third
ID: 13504318
also, naming your selectbox "action" might confuse with the action attribute of the form. i would suggest "selAction". ;-)
0
 

Author Comment

by:jturkington
ID: 13504434
I still need to manually change the size of the window depending on what window is being opened and i also need to give the window a name how do i add this into it the solution: -

This
onclick="return!openPopup('/window1.cfm?', 'window1',800,600)"

into this

<select name="action" onchange="openPopup(this.options[this.selectedIndex].value)">
   <option value="" selected>Please Select</option>
   <option value="window1.cfm">Window1</option>
   <option value="window2.cfm">Window2</option>
</select>

Cheers
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504462
One solution is to add the width and height to the options as attributes.

Example:

<html>
<head>
<script>
function openPopup(url,name,wid,hght) {
      if(url.length==0)return;
     windowFeatures ="menubar=no,scrollbars=yes,location=no,favorites=no,resizable=no,status=no,toolbar=no,directories=no";
     width=wid;
     height=hght;
      // Centralize the popup window.
      winLeft = (screen.width-width)/2;
     winTop = (screen.height-(height+110))/2;
     window.open(url, name, "width="+width+",height="+height+",left=" + winLeft + ",top=" + winTop + ","+windowFeatures);
     }
</script>


</head>
<body>
<form>
<select name="selAction">
   <option value="" selected>Please Select</option>
   <option value="window1.cfm" winWidth="800" winHeight="600">Window1</option>
   <option value="window2.cfm" winWidth="500" winHeight="300">Window2</option>
</select>
<input type="button" value="Go" onclick="var obj =document.forms[0].selAction;openPopup(obj.options[obj.selectedIndex].value,'theName',obj.options[obj.selectedIndex].winWidth,obj.options[obj.selectedIndex].winHeight)">
</form>
</body>

0
 

Author Comment

by:jturkington
ID: 13504525
Can i do it without using a button? and use the onchange event with the select box ?
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504589
With onchange:

<html>
<head>
<script>
function openPopup(url,name,wid,hght) {
     if(url.length==0)return;
     windowFeatures ="menubar=no,scrollbars=yes,location=no,favorites=no,resizable=no,status=no,toolbar=no,directories=no";
     width=wid;
     height=hght;
      // Centralize the popup window.
      winLeft = (screen.width-width)/2;
     winTop = (screen.height-(height+110))/2;
     window.open(url, name, "width="+width+",height="+height+",left=" + winLeft + ",top=" + winTop + ","+windowFeatures);
     }
</script>


</head>
<body>
<form>
<select name="selAction" onchange="openPopup(this.options[this.selectedIndex].value,'theName',this.options[this.selectedIndex].winWidth,this.options[this.selectedIndex].winHeight)">
   <option value="" selected>Please Select</option>
   <option value="window1.cfm" winWidth="800" winHeight="600">Window1</option>
   <option value="window2.cfm" winWidth="500" winHeight="300">Window2</option>
</select>
</form>
</body>
0
 
LVL 30

Expert Comment

by:third
ID: 13504597
i'll post for batalf,

<select name="selAction" onchange="if(this.selectedIndex>0)openPopup(this.options[this.selectedIndex].value,'theName',this.options[this.selectedIndex].winWidth,this.options[this.selectedIndex].winHeight)">
   <option value="" selected>Please Select</option>
   <option value="window1.cfm" winWidth="800" winHeight="600">Window1</option>
   <option value="window2.cfm" winWidth="500" winHeight="300">Window2</option>
</select>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504613
I did post:-)
0
 
LVL 30

Expert Comment

by:third
ID: 13504624
opps, sorry i thought you're not around. ;-) you forgot to check if selectedIndex > 0
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504630
I do it in the function by cheking the length of url

if(url.length==0)return;

0
 
LVL 30

Expert Comment

by:third
ID: 13504656
ok, i missed that. i'll go home now...
0
 

Author Comment

by:jturkington
ID: 13504657
Can you incorporate the window name into the <option> ?

I am having a problem if a user selects for example window1 and then decides to select window2 the window size doesnt change from window1 size to window2 size ??

Cheers

JT
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504662
<html>
<head>
<script>
function openPopup(url,name,wid,hght) {
     if(url.length==0)return;
     windowFeatures ="menubar=no,scrollbars=yes,location=no,favorites=no,resizable=no,status=no,toolbar=no,directories=no";
     width=wid;
     height=hght;
      // Centralize the popup window.
      winLeft = (screen.width-width)/2;
     winTop = (screen.height-(height+110))/2;
     window.open(url, name, "width="+width+",height="+height+",left=" + winLeft + ",top=" + winTop + ","+windowFeatures);
     }
</script>


</head>
<body>
<form>
<select name="selAction" onchange="openPopup(this.options[this.selectedIndex].value,this.options[this.selectedIndex].winName,this.options[this.selectedIndex].winWidth,this.options[this.selectedIndex].winHeight)">
   <option value="" selected>Please Select</option>
   <option value="window1.cfm" winWidth="800" winHeight="600" winName="myWindow1">Window1</option>
   <option value="window2.cfm" winWidth="500" winHeight="300" winName="myWindow1">Window2</option>
</select>
</form>
</body>
0
 

Author Comment

by:jturkington
ID: 13504674
I am having a problem if a user selects for example window1 and then decides to select window2 the window size doesnt change from window1 size to window2 size ??

How do i overcome this ??

0
 
LVL 32

Expert Comment

by:Batalf
ID: 13504712
You may have to close the first window before opening the second one.

Try something like this:

<html>
<head>
<script>
var myWin=false;
function openPopup(url,name,wid,hght) {
     if(url.length==0)return;

     windowFeatures ="menubar=no,scrollbars=yes,location=no,favorites=no,resizable=no,status=no,toolbar=no,directories=no";
     width=wid;
     height=hght;
      // Centralize the popup window.
      winLeft = (screen.width-width)/2;
     winTop = (screen.height-(height+110))/2;
     if(myWin)myWin.close();
     myWin = window.open(url, name, "width="+width+",height="+height+",left=" + winLeft + ",top=" + winTop + ","+windowFeatures);
     myWin.focus();
     }
</script>


</head>
<body>
<form>
<select name="selAction" onchange="openPopup(this.options[this.selectedIndex].value,this.options[this.selectedIndex].winName,this.options[this.selectedIndex].winWidth,this.options[this.selectedIndex].winHeight)">
   <option value="" selected>Please Select</option>
   <option value="window1.cfm" winWidth="800" winHeight="600" winName="myWindow1">Window1</option>
   <option value="window2.cfm" winWidth="500" winHeight="300" winName="myWindow1">Window2</option>
</select>
</form>
</body>
0
 

Author Comment

by:jturkington
ID: 13504793
Also is there any way to overcome this annoying situation: -

The user selects window1, window1 pops up, user closes window1 by mistake, the user tries to click window1 again in the select box, nothing happens they have to click on window2 or Please Select and then click back onto window1 to get it to open again ??

Cheers

JT
0
 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 13505135
You could reset the select box at the end of the function.


<html>
<head>
<script>
var myWin=false;
function openPopup(url,name,wid,hght,selectObj) {
     if(url.length==0)return;

     windowFeatures ="menubar=no,scrollbars=yes,location=no,favorites=no,resizable=no,status=no,toolbar=no,directories=no";
     width=wid;
     height=hght;
      // Centralize the popup window.
      winLeft = (screen.width-width)/2;
     winTop = (screen.height-(height+110))/2;
     if(myWin)myWin.close();
     myWin = window.open(url, name, "width="+width+",height="+height+",left=" + winLeft + ",top=" + winTop + ","+windowFeatures);
     myWin.focus();
     selectObj.selectedIndex=0;
     }
</script>


</head>
<body>
<form>
<select name="selAction" onchange="openPopup(this.options[this.selectedIndex].value,this.options[this.selectedIndex].winName,this.options[this.selectedIndex].winWidth,this.options[this.selectedIndex].winHeight,this)">
   <option value="" selected>Please Select</option>
   <option value="ee27.html" winWidth="800" winHeight="600" winName="myWindow1">Window1</option>
   <option value="ee27.html" winWidth="500" winHeight="300" winName="myWindow1">Window2</option>
</select>
</form>
</body>
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question