dropdown change a btn?

bfly03 · 07-22-2010, 05:12 AM

i am trying to get my drop down menu to change a button's link... is this possible?

cheers,

Rowsdower! · 07-22-2010, 01:33 PM

Quote:

Originally Posted by bfly03

i am trying to get my drop down menu to change a button's link... is this possible?

cheers,

It should be. Do you have some code for us to look at?

bfly03 · 07-22-2010, 02:42 PM

Quote:

Originally Posted by Rowsdower!

It should be. Do you have some code for us to look at?

I think I am looking for something like a onChange event but I am not sure.
I am still very new to js.... and i have not built anything as of yet i wanted to see how to do it first.

any ideas?

Rowsdower! · 07-22-2010, 04:27 PM

Quote:

Originally Posted by bfly03

I think I am looking for something like a onChange event but I am not sure.
I am still very new to js.... and i have not built anything as of yet i wanted to see how to do it first.

any ideas?

Yes, "onchange" is your event of choice for this. Take a look here to get some ideas:
http://www.javascriptkit.com/jsref/select.shtml#aform

You would just need to alter the script so that instead of opening a website in a new window it will just get an element by id and change it's href or action attriubte. Try it for yourself and if you get stuck post back with the code you used and the specific problem you are having. I'll be happy to help you learn.

bfly03 · 07-22-2010, 07:50 PM

so i got it working with the code below:
do you know how i can change an image out as well?

thanks!

Code:

<select id="myoptions" onchange="dosomething()">
    <option value="myhome">my home page</option>
    <option value="myresume">resume</option>
    <option value="myhobbies">hobbies</option>
    <option value="mydog">my dog</option>
</select>
<br /> <br />
 
<a id="mylink" href="this.html">Link on first load</a>

Code:

function dosomething() {
    var inputSelector = document.getElementById("myoptions");
    var link = document.getElementById("mylink");
    if (inputSelector.value == "myresume") {
        link.innerHTML = "My Resume";
        link.href = "resume.html";
    } else {
        link.innerHTML = "Other Things";
        link.href = "other.html";
    }
    
}

Rowsdower! · 07-22-2010, 10:10 PM

Quote:

Originally Posted by bfly03

so i got it working with the code below:
do you know how i can change an image out as well?

thanks!

Code:

<select id="myoptions" onchange="dosomething()">
    <option value="myhome">my home page</option>
    <option value="myresume">resume</option>
    <option value="myhobbies">hobbies</option>
    <option value="mydog">my dog</option>
</select>
<br /> <br />
 
<a id="mylink" href="this.html">Link on first load</a>

Code:

function dosomething() {
    var inputSelector = document.getElementById("myoptions");
    var link = document.getElementById("mylink");
    if (inputSelector.value == "myresume") {
        link.innerHTML = "My Resume";
        link.href = "resume.html";
    } else {
        link.innerHTML = "Other Things";
        link.href = "other.html";
    }
    
}

You would just need to add the image-changing lines of script into your existing function. I don't know what image you are changing or what you are changing about it, but it would look something roughly like this:

Code:

function dosomething() {
    var inputSelector = document.getElementById("myoptions");
    var link = document.getElementById("mylink");
    var myimage = document.getElementById("myimage");
    if (inputSelector.value == "myresume") {
        link.innerHTML = "My Resume";
        link.href = "resume.html";
        myimage.src="path/to/new/image/location.jpg";
    } else {
        link.innerHTML = "Other Things";
        link.href = "other.html";
        myimage.src="path/to/some/other/image/location.jpg";
    }
    
}

...
...
...

<select id="myoptions" onchange="dosomething()">
    <option value="myhome">my home page</option>
    <option value="myresume">resume</option>
    <option value="myhobbies">hobbies</option>
    <option value="mydog">my dog</option>
</select>
<br /> <br />
 
<a id="mylink" href="this.html">Link on first load</a>
<img id="myimage" alt="image description" src="path/to-image.jpg" />