PDA

Click to See Complete Forum and Search --> : Inline new window command for drop down FORM

connermcd
01-23-2007, 08:21 PM
sighhhh. i need some help. I'm making a clickthrough help guide for do-it-yourself technicians and I would very much like to have a drop down box that links to other webpages. All good. I can handle a simple code like that, but when trying to make those links open a new window I have a bit of trouble. The standard inline target="name" command doesn't work on the drop down box. Here's a sample of what I'm talking about.

<FORM NAME="Box1">
<SELECT NAME="Links1">
<OPTION SELECTED>Choose.
<OPTION VALUE="http://www.google.com" TARGET="newgooglewindow">Google!
<OPTION VALUE="http://www.yahoo.com" TARGET="newyahoowindow">Yahoo!
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Go." onClick="LinkUp()">
</FORM>

Anyone got any ideas on other commands besides TARGET or is there a javascript to work around this? I appreciate your replies.
ray326
01-23-2007, 10:58 PM
<FORM NAME="Box1">
<select name="Links1" onchange="window.open(this.value)">
<OPTION SELECTED>Choose.
<OPTION VALUE="http://www.google.com">Google!</option>
<OPTION VALUE="http://www.yahoo.com">Yahoo!</option>
</SELECT>
</FORM>
connermcd
01-24-2007, 12:00 AM
thank you
connermcd
01-24-2007, 12:03 AM
ok so take out the button, but there still leaves a problem. My option selected choose when changed opens a blank window. any way to negate that?
ray326
01-24-2007, 09:55 PM
It creates a "new window". The title of this thread says "new window". The use of the target as stated will produce a "new window." :confused:
connermcd
01-25-2007, 08:59 AM
here i figured it out.... here's the code if you're interested. your way is included but there's also three other options.


<html>
<head>
<script type="text/javascript">
// this function is only used in ex #1
function LinkUp()
{
var opt = document.getElementById('Links1');
if (opt.value != '') window.open('http://' + opt.value + '/');
}

// this function is only used in ex #4
window.onload = function()
{
document.getElementById('Links4').onclick = function()
{
var opt = document.getElementById('Links3');
if (opt.value != '') window.open('http://' + opt.value + '/');
};
};

</script>
</head>

<body>

ex1: Calling external function.
<br/>
<SELECT id="Links1">
<OPTION value="" SELECTED>Choose</option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Proceed." onClick="javascript:LinkUp();">
<br/>
<br/>

ex2: Using inline script.
<br/>
<select id="Links2">
<OPTION value="" SELECTED>Choose</option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
</select>
<INPUT TYPE="BUTTON" VALUE="Proceed." onClick="javascript:var opt = document.getElementById('Links2'); if (opt.value != '') window.open('http://' + opt.value + '/');">
<br/>
<br/>

ex3: Using inline script in the onchange() event.
<br/>
<select onchange="javascript:if (this.value != '') window.open('http://'+this.value+'/');">
<OPTION value="" SELECTED>Choose</option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
</select>
<br/>
<br/>

ex4: Using script externally bound to the element.
<br/>
<SELECT id="Links3">
<OPTION value="" SELECTED>Choose</option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
<OPTION VALUE="www.yahoo.com"> Yahoo </option>
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Proceed." id="Links4">
</body>
</html>