Update Link Depending on Drop-Down Selection

[Wardrop]

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...

<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...

<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!

[paul_wilkins]

The simplest way is to place a large chunk of the link in the script.

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

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.

[Wardrop]

Thanks, but you haven't told me how I get the selected value of the drop-down, into the function.

[paul_wilkins]

<select onchange="change_link(this.value)">

[Wardrop]

Thanks for that, works a charm.