SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update Link Depending on Drop-Down Selection

    Is it possible to have part of a link (or the whole link) to change depending on the selected item in a drop-down menu within a form?

    Here's what my link will look like...

    HTML Code:
    <a href="http://www.calculator.com/calculate.php?weight=2.5kg&country=England">Calculator</a>
    The 'England' part of the string would be only chunk which would need to be changed when a different item is selected in the drop-down. I'm assuming something like this would do the trick...

    HTML Code:
    <select onchange="change_link(link)">
    <option value="Australia">Australia</option>
    <option value="England">England</option>
    </select>
    
    <a href="http://www.calculator.com/calculate.php?weight=2.5kg&country=England" id="link">Calculator</a>
    I'm just not sure of what you'd put in the change_link function as I'm a bit of a 'n00b' when it comes to javascript. In the end though, I want the value of the currently selected item in the drop-down, to replace the value of 'country' in the link/url.

    Thanks!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    The simplest way is to place a large chunk of the link in the script.

    Code JavaScript:
    function change_link(link) {
      var href = 'http://www.calculator.com/calculate.php?weight=2.5kg&country=' + link;
      document.getElementById('link').setAttribute('href', href);
    }

    More complex ways can split off the required part of the existing link, modify it then place it back again.

    An unoptimised way of doing this is

    Code JavaScript:
    function change_link(value) {
      var a = document.getElementById('link');
      var hrefParts = a.getAttribute('href').split('?');
      var pairs = hrefSplit[1].split('&');
      var pairSplit;
      for (var i = 0, l = pairs.length; i < l; i++) {
        pairSplit = pairs[i].split('=');
        if ('country' == pairSplit[0]) {
    	  pairSplit[1] = value;
    	  pairs[i] = pairSplit.join('=');
    	  hrefParts[1] = pairs.join('&');
    	  a.setAttribute('href', hrefParts.join('?'));
    	}
      }
    }

    If you're going to be doing this kind of thing on a regular basis, there is a good querystring class that makes the job a whole lot easier for you.
    Last edited by paul_wilkins; Dec 8, 2007 at 20:16.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but you haven't told me how I get the selected value of the drop-down, into the function.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Code HTML4Strict:
    <select onchange="change_link(this.value)">

  5. #5
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, works a charm.


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
  •