Passing an URL parameter to a href link using Javascript

Question

I have the following code working to pass a URL parameter to a form tag:

<script type="text/javascript">
  function getQueryVariable(variable) { 
 var query = window.location.search.substring(1); 
 var vars = query.split("&"); 
 for (var i=0;i<vars.length;i++) { 
 var pair = vars[i].split("="); 
 if (pair[0] == variable) { 
   return pair[1]; 
    }
  }
}
 function onLoad() {
var value = getQueryVariable("ID");
var e = document.getElementById('your-field');
e.value = value;
}
</script>

And...

<body onload="onLoad()">
 <!-- your form and hidden field goes here -->
 <input type="hidden" name="your-field" id="your-field" />

How can I pass the same value to an HTML link so that the end result would be:

<a href="http://www.mysite.com?source=[ID]" >

Where [ID] is the whatever piece of code that is needed to add the parameter to the link?

Thanks in advance.

RobEarl · Accepted Answer · 2013-08-07 11:16:41Z

9

You should give an id to you link, like this:

<a id="YOUR_ID" href="#" >

And then you have two ways to solve the problem, use pure Javascript or use jQuery:

IF you use jquery you can use your onLoad function and inside inject the following:

var url = "http://www.mysite.com?source=" + value;
$("#YOUR_ID").attr("href",url)

OR using pure javascript:

var url = "http://www.mysite.com?source=" + value;
var element = document.getElementById('YOUR_ID');
element.setAttribute("href",url)

edited Aug 7, 2013 at 11:16

RobEarl

7,9226 gold badges38 silver badges52 bronze badges

answered Feb 29, 2012 at 23:48

Joao Almeida

9822 gold badges6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aerozeek · Accepted Answer · 2012-03-01 00:12:56Z

1

Change the function onload to this:

function onLoad() {
   var value = getQueryVariable("ID");
   var e = document.getElementById('your-field');
   e.value = value;

   var url = "http://www.mysite.com?source=" + value;
   var element = document.getElementById('YOUR_<A>_ELEMENT_ID');
   element.setAttribute("href",url)
}

I'm using the piece of code that Joao Almeida suggested so his example using jQuery works good too.

Good Luck!

answered Mar 1, 2012 at 0:12

Aerozeek

5051 gold badge3 silver badges11 bronze badges

1 Comment

Lawrence Over a year ago

Hi and thanks :) Excuse my ignorance but... what should the a href tag look like? Also, I have 3 different a href tags that need the value to be appended... will the code above work for any number of links?

Collectives™ on Stack Overflow

Passing an URL parameter to a href link using Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related