?
Solved

Opening item from Select List in new window

Posted on 2003-02-21
4
Medium Priority
?
148 Views
Last Modified: 2008-02-26
I want to have a 'select' tag on my HOME web page that provides a 'quick navigation' feature - when a visitor clicks a 'Topic' in the select list, I want the topic page to open in a NEW WINDOW.

I have tried a 'jump menu', but this defaults the target to 'parent'. Changing this item to '_blank' has no effect and the targetted page still opens in the original window.

All of my efforts with select tags and jump menus just result in the 'parent' window being used.

To prevent a proliferation of open windows, I would prefer the target to open in a 'Named' window, but other alternatives could be to open in '_blank' or in a window created by a javascript function.

Also, would it be necessary to use '<form>' and '</form>' tags to enclose the visible components?

thanks

nedwob
0
Comment
Question by:nedwob
[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
4 Comments
 
LVL 17

Accepted Solution

by:
dorward earned 300 total points
ID: 7992369
If you must use a <select> element as a navigation tool, you should first read:

http://www.cs.tut.fi/~jkorpela/forms/navmenu.html

To open a new window, change:

<form ...> to <form ... target="_blank">

and alter the JavaScript so that:

   window.location.href=URL (or whatever)

becomes

   window.open(URL)
0
 

Expert Comment

by:abridge
ID: 7993056
This works for me - it also allows you to apply features to the new window

<script language="JavaScript" type="text/javascript">
function go1(winName,features){
if (document.selecter1.select1.options[document.selecter1.select1.selectedIndex].value != "none") {
window.open(document.selecter1.select1.options[document.selecter1.select1.selectedIndex].value,winName,features);
          }
     }
</script>
<form name="selecter1"><select name="select1" size=1 onchange="go1('WindowName','width=270,height=330')">
<option value=none>Select your destination
<option value=none>--------------------
<option value="here.htm">here
<option value="there.htm">there
</select>
</form>

:)
0
 
LVL 4

Expert Comment

by:whammy
ID: 7998609
<html>
<head>
   <title>Open a new window with a dropdown using javascript!</title>
<script type="text/javascript">
<!--
function openWindow(val) {
   if(val) {
      myWin = window.open(val,"myWin");
      window.myWin.focus();
   }
}
// -->
</script>
</head>
<body>
   <form id="form1" action="javascript:void 0">
      <select name="myselect" onchange="openWindow(this.options[this.selectedIndex].value)">
         <option value="">Choose a website!</option>
         <option value="http://www.google.com">Google it!</option>
         <option value="http://www.yahoo.com">Yahoo!</option>
         <option value="http://www.download.com">Find a cool program!</option>
      </select>
   </form>
</body>
</html>
0
 

Author Comment

by:nedwob
ID: 8033825
Thanks to all who answered. I decided to accept the comment from 'dorward' because the link he provided has given me a lot of useful information.

nedwob
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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

777 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