Fetch Query String From URL and Pass It to Href

Question

I saw several possible solutions to my problem here but somehow I fail to find appropriate solution.

My scenario is this:

User comes to pageA carrying query string in url.

It looks like this: http://example.com?name=xxxxx&email=xxxxx&a1=1xxxxx

On that page I have two links, lets say their IDs are linkA and linkB.

I am interested in first one with the markup like this:

<a href="" id="linkA">Link A</a>

I need to fetch entire query string from url and add it to linkA which will point to another URL. So the final link looks like this:

<a href="http://anotherurl.com?name=xxxxx&email=xxxxx&a1=1xxxxx" id="linkA">Link A</a>

Can you help me out with clean solution?

Thank you in advance!

You can get the current url using document.URL and pick the query params. — Rinkesh Golwala
– Rinkesh Golwala, Commented Jul 23, 2019 at 9:24
If I understood correctly, you need to get the current page's URL, transform it, and assign it to the link tag? — M0nst3R
– M0nst3R, Commented Jul 23, 2019 at 9:24
Or possible you need the other page URL(Page B), and put this URL in <a> tag of page(A)? — Layer
– Layer, Commented Jul 23, 2019 at 9:26

Terry · Accepted Answer · 2019-07-23 09:27:20Z

3

You can just use window.location.search to access the entire query string from the page's URL. It will return something like this: ?name=xxxxx&email=xxxxx&a1=1xxxxx.

You can then append that to your anchor element's href attribute, e.g.

document.querySelector('#linkA').href = `http://anotherurl.com/${window.location.search}`;

If you need an ES5-based solution, this will work:

document.querySelector('#linkA').href = 'http://anotherurl.com/' + window.location.search;

answered Jul 23, 2019 at 9:27

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

4 Comments

Layer Over a year ago

I love template strings :3

Sinisa Bajic Over a year ago

Thank you very much! This neatly solves my problem.

Terry Over a year ago

@Riven Me too :) especially when most browsers today support ES6: and even if they don't, you can just use a transpiler.

Terry Over a year ago

@SinisaBajic Glad my answer helped you :)

Tech Pirate · Accepted Answer · 2019-07-23 09:27:47Z

0

You could try using search key of window.location which returns the search query of the current url.

So, on http://example.com/?name=xxxxx&email=xxxxx&a1=1xxxxx, using the following

window.location.search

will give you the following string

?name=xxxxx&email=xxxxx&a1=1xxxxx

You could then append this string to the "href" of the second anchor tag

answered Jul 23, 2019 at 9:27

Tech Pirate

1

Comments

Raghav Patel · Accepted Answer · 2019-07-23 09:32:56Z

0

Try this code, it's working fine:

$(document).ready(function(){
    var parameters = window.location.search;
    var link = $('#linkA').attr('href');
    $('#linkA').attr('href', link + parameters);
});

answered Jul 23, 2019 at 9:32

Raghav Patel

8537 silver badges23 bronze badges

Collectives™ on Stack Overflow

Fetch Query String From URL and Pass It to Href

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related