HTML: target="_blank" for a drop-down list

Question

Problem: to open a new window with the select -option

<form onsubmit="return handleSubmit()" target="_blank" method="get" name="moduleForm" id="moduleForm">
<font size=2 face = verdana color= #0000ff ><b>Search</b></font>

    <select name="allSelect" id="allSelect">
    <optgroup label="Historical">
    <option value="http://www.something.com/cse?cx=0000000000000&amp;sa=Search&amp;q="&gt;Open in a new window 1</option>
    <option value="http://www.google.com/cse?cx=0000000000000000A-cmjrngmyku&amp;ie=UTF-8&amp;sa=Search&amp;q="&gt;Open in a new window 2</option>
    </optgroup>
    </select>

<input type="text" name="allQuery" id="allQuery" size="22" />
<input type="submit" value=" Go " />

Question: How can I open the content to a new window with a select-box?

Answer 1

You can open your links by window.open() :

<select name="allSelect" id="allSelect">
<optgroup label="Historical">
<option value="http://www.something.com/cse?cx=0000000000000&amp;sa=Search&amp;q="&gt;Open in a new window 1</option>
<option value="http://www.google.com/cse?cx=0000000000000000A-cmjrngmyku&amp;ie=UTF-8&amp;sa=Search&amp;q="&gt;Open in a new window 2</option>
</optgroup>
</select>

<input type="button" 
    value="open in a new window" 
    onclick="window.open(document.getElementById(allSelect).value);" />

Answer 2

Give a look to the window.open function.

Answer 3

Keep in mind that your page should be usable without scripting, so I'd suggest implementing a fallback mechanism: The form should call a server-side script which responds with a 30x status and a Location header.

The client-side would look like this:

<form action="path-to-redirection-script" method="GET" target="_blank"
 onsubmit="window.open(this.elements['foo'].value); return false;">
 <select name="foo" size="1">
  <option value="http://google.com"&gt;google&lt;/option&gt;
 </select>
 <input type="submit" value="go">
</form>

Also, remember that target="_blank" / window.open() is often evil.

Answer 4

Modify your handleSubmit function as follows:

function handleSubmit()
{
    var form = _gel("moduleForm"),
        elm = _gel("allQuery"),
        selectElm = _gel("allSelect");
    if (elm != "" && selectElm != "") {
        var query = elm.value;
        var searchUrl = selectElm.value;
        if (query != "" && searchUrl != "") {
            searchUrl += escape(query);
            window.open(searchUrl, form.target || "_blank");
        }
    }
    return false;
}