I'm looking for a robust way of dynamically injecting a query string parameter when a visitor clicks on a static anchor-link.
For example a link:
<a href="http://www.johndoeslink.com">Test</a>
I want to pass a query string to the next page but have to assign the value dynamically. How can I achieve this?
I know this is simple I'm just missing something obvious! =\
Thanks in advance,
John d
There are many ways you could do this. Below I've listed two very simple methods. Here I'm assuming you already have a reference to your a element (here I've called this element):
href attributeelement.href += '?query=value';
element.addEventListener('click', function(event) {
// Stop the link from redirecting
event.preventDefault();
// Redirect instead with JavaScript
window.location.href = element.href + '?query=value';
}, false);
if statement to check if a window.location.search is already present. if (window.location.search) window.location.href = element.href + '&query=value';
element.search = '?query=value'. This way you don't have to fiddle around with whether or not the element already has a querystring or not, which you might be adding to instead of replacing.If you already know the value to append when loading the page then you can add this when the document is ready : If you're using JQuery use this:
$( 'class' ).attr( 'href', function(index, value) {
return value + '?item=myValue';
});
Otherwise (plain Javascript):
var link = document.getElementById("mylink");
link.setAttribute('href', 'http://www.johndoeslink.com'+'?item=myValue');
search property instead of the href one. Then you can do element.search = '?query=value'. This way you don't have to fiddle around with having to set the domain and path portions of the url.