New browser window/tab onchange from form select?

JavaScript
1

Searched forum and couldn’t find an answer - sorry to bug you, but I’d appreciate any help here…

Web page has a form with an input field (select - dropdown) - and a javascript function to effect the field ‘onchange’.
User selects an option and the javascript function (using ‘onchange’) opens the selected URL in the same browser window:

<script language=“JavaScript”>
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
</script>

[…]
<form name=form>
<SELECT NAME=“site” onChange=“javascript:formHandler()”>
<OPTION VALUE=“”> choose a state…
<OPTION VALUE=“http://www.ohio.com/” target=“_blank”>OHIO

The “target=” is being ignored.

How do I get this function to open the site in a new browser tab/window?

Thank you!

  • Michael
2

Hey Michael.

The reason it doesn’t work is because the target attribute, for this type of use, is only effective on links.

Try using the method [window.open()](https://developer.mozilla.org/en-US/docs/DOM/window.open) instead of window.location.href. That way a new browser tab/window will be used.


window.open(URL);

Check the MDN documentation, linked to above, for more information about window.open().

3

Thanks John - I appreciate your pointing me in the right direction. I tried playing with the window.open() method but I can’t figure out how to use that in place of what I’m using now:

{
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}

I tried :
<script language=“JavaScript”>
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.open.href = URL;
}
</script>
<SELECT NAME=“site” onChange=“javascript:formHandler()”>

no luck…

I am not a coder (obviously) , and while I can usually follow syntax and make headway, javascript is all so much black-magic to me. Help?

4

Hey Michael. This is an easy one to solve now - window.open() is a method - so it should be called like a function. Between window.location.href being a property (a variable inside of an object) and window.open() being a method (a function inside of an object) I can understand the confusion. Especially because they perform a relatively similar functionality.

The solution is to use window.open() like this:


function formHandler(form){
   var URL = document.form.site.options[document.form.site.selectedIndex].value;
   window.open(URL);
}

Hope this helps :slight_smile:

5

Hi John -

Yep… that works, opening a new window each time the user selects something. THANK YOU!

Out of curiosity, is it possible to modify
window.open(URL);
so that it opens to a ‘named’ window (so that each subsequent slection replaces the last one?

  • Michael
6

Yeah - that’s actually really easy - you can just pass a second parameter that will be the “name” of that window.


window.open(URL, "YourWindowName");

(Note that you shouldn’t have spaces in that string, see https://developer.mozilla.org/en-US/docs/DOM/window.open for more info.)

7

Thank you John… your help is greatly appreciated -
you’ve saved me a ton of time!

  • Michael