Forums

thatothertechguy

I need for there to be a way for the user to select an option, from a form, obviously using the select and option elements in HTML, then dynamically changing the href of an anchor link. If there is a better way to do this, I am definitely open to any suggestions. I would prefer that it be done in PHP, however, like I said, I am also open to other languages.
Thanks much!

EDIT:
The links will also be to an external site, not the one I am working on.

Hompimpa

Like this?

<select onchange="window.open(this.value);">
    <option selected>-Links-</option>
    <option value="http://www.google.com">Google</option&gt;
    <option value="http://goo.gl/jAX6N">DTE :]</option>
</select>

http://jsfiddle.net/tovic/2WLCU/5/

Or this:

<select onchange="replaceLink(this.value);">
    <option selected>-Links-</option>
    <option value="http://www.google.com">Google</option&gt;
    <option value="http://goo.gl/jAX6N">DTE :]</option>
</select> <a id="link" href="#" target="_blank">Go to here!</a>
<script>
function replaceLink(v) {
    document.getElementById('link').href = v;
}
</script>

http://jsfiddle.net/tovic/2WLCU/7/

agrimsrud

I'd recommend not using inline javascript. Try something like:

<select id="linkselect">
    <option>Choose:</option>
    <option value="http://google.com/">Google</option&gt;
    <option value="http://apple.com/">Apple</option&gt;
</select>
<a id="mylink" href="http://example.com">Example.com</a&gt;

Then go with the Javascript by it self:

<script>
var lnk = document.getElementById('mylink'),
    sel = document.getElementById('linkselect');
	
sel.onchange = function(){
    lnk.href = this.value;
}
</script>

Or:

<script>
var sel = document.getElementById('linkselect');
sel.onchange = function(){
    window.location = this.value;
}
</script>

Edit: Rewrote the code a bit.

thatothertechguy

Thank you both a bunch, this works great, but is there any way I can do your way with multiple selects on the same page, without rewriting the code a bunch of times? I am not the greatest when it comes to JavaScript. Thanks again!

Edit: they are all each in their own div also.

treehouse : what would you like to learn today?

Forums

Dynamic Link via Select