SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dropdown change btn?

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

    cheers,

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Do you mean your trying to change a button link using a select drop down?

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Location
    Exeter, Devon. UK.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use the onChange() JavaScript event to edit the link as required according to the selection made.

    Is this the kind of thing you're aiming for?

    ------------------------------------------
    www.ipponsolutions.co.uk - website design in Exeter, UK.

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    rich, i looked up the change event and it seems to be what i am looking for.

    i am having trouble finding anything helping me with this. do you have any ideas or knowledge of where i can go to learn this?

    cheers,

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Location
    Exeter, Devon. UK.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you Google 'html dropdown list onchange javascript' you'll get quite a few examples.

    Here's something I've just put together which might help you though:

    HTML selector calls the JavaScript function dosomething()
    Code HTML4Strict:
     
    <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>

    JavaScript function changes the text and reference of the link depending on your selection:

    Code JavaScript:
    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";
    	}
     
    }


    ------------------------------------------
    www.ipponsolutions.co.uk - website design in Exeter, UK.

  6. #6
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that is exactly what i am looking for thank you.

    oh i just tested it and it does not seem to be working correctly. do you know why?

    http://digitalprintingservice.net/test.html

  7. #7
    SitePoint Member
    Join Date
    May 2010
    Location
    Exeter, Devon. UK.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks as if you've combined the JavaScript, where you added my JavaScript try this instead:

    Code JavaScript:
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 
    <script type="text/javascript">
    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";
     }
    }
    </script>

    When you reference external JS files you need to have them in their own <script> block. Any internal scripts have to be seperate.

    ------------------------------------------
    www.ipponsolutions.co.uk - website design in Exeter, UK.

  8. #8
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hahah yeah thanks. im an idiot.

  9. #9
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have one more question pertaining to this. if i wanted to change a separate image with each of these 4 options (as well as a link like you've done) is there an easy way to add that in?

  10. #10
    SitePoint Member
    Join Date
    May 2010
    Location
    Exeter, Devon. UK.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should be pretty straight forward. You just extend the example I've given you.

    Add an image in the HTML, and in the if block of the javascript change the .src of the img, or whatever you need to alter of the image:

    Code JavaScript:
    var img = document.getElementById("myimg");
     
    if (.....) {
     
    img.src = "logo.gif"
     
    } else {
    ....
    }


    ------------------------------------------
    www.ipponsolutions.co.uk - website design in Exeter, UK.


Bookmarks

Posting Permissions

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