Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dropdown change a btn?

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

    cheers,

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by bfly03 View Post
    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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    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?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by bfly03 View Post
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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";
        }
        
    }

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by bfly03 View Post
    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" />
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •