Javascript/html keep url params

Question

say I provide someone with a link to my page that looks like the following

www.linkone.com?something=ten

When they visit the page, the param will be visible within the url for that page. If on that page I then have a link like so

<a href="linktwo.html"> Link Two </a>

When they click on it, Link Two's url will look like

www.linkone.com/linktwo.html

Is there any way to add the param from the first link onto any other links within the page? So when they visit Link Two, I want to url to end up being

www.linkone.com/linktwo.html?something=ten

I know it is probably possible via javascript, but the homepage has a lot of links on it to other pages within the site, and I need to param on all links. What is the best way to achieve this?

Thanks

What if the new link itself has new parameters or you want to delete an old parameter? What then? — Niet the Dark Absol, Oct 14 '15 at 11:17
I have tried local storage, but not too sure I trust this method. I have also tried a javascript solution which gets the param and then sets the attr value of my link with this param appended, but when you have a lot of links this seems very inefficient. — katie hudson, Oct 14 '15 at 11:18
p.s. the parameters will always be the same for each user, they will never change — katie hudson, Oct 14 '15 at 11:18
A short javascript snippet can modify all `a` elements when the page loads and append the querystring - you would not need to do them individually — Alex K., Oct 14 '15 at 11:18
http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — caramba, Oct 14 '15 at 11:18

score 7 · Answer 1 · answered Oct 14 '15 at 11:19

7

$('a:not([href=#])').on('click', function (e) {
    e.preventDefault();
    location.href = this.href + "your param";
});

answered Oct 14 '15 at 11:19

Liviu Boboia

1,734
1
10
21

What if anchor has target attribute ? – ebilgin Oct 14 '15 at 11:20
If you update the links href you need to update the ones that are dynamically added also, with this you can use event delegation like so $("body").on("click", 'a:not([href=#])', function()... – Liviu Boboia Oct 14 '15 at 11:25
This solution partially work. If anchor has an target="_blank" attribute this solution ignore the opening new window behavior. – ebilgin Oct 14 '15 at 11:43

Valentin Podkamennyi · Answer 2 · 2018-07-05T22:57:37.170

2

My suggestion is:

$('a:not([href=#])').click(function(e) {
  e.preventDefault();

  // Getting query-string parameters from current page URL.
  var query = location.search.substr(1);

  // Getting URL from current link;
  var url = new URL($(this).attr('href'));

  // Updating query-string parameters of current link.
  url.search += (url.search.indexOf('?') == 0 ? '&' : '?') + query;

  // Getting the link target.
  var target = $(this).attr('target');

  // Navigating to new URL.
  if (target) {
    window.open(url.toString(), target);
  } else {
    location.assign(url.toString());
  }
});

edited Jul 05 '18 at 22:57

answered Oct 14 '15 at 12:22

Valentin Podkamennyi

7,161
4
29
44

Here we are again, what if anchor has a target="_blank" attribute ? – ebilgin Oct 14 '15 at 12:32

score 1 · Answer 3 · answered Oct 14 '15 at 11:19

One way to achieve a similar function is to use cookies or session. When a user visits your site with additional param, set a cookie on the parent page with that param so that it would be available for other calls/links. You could do that in session as well. session would retain the value till the session times out and cookie expires based on the expiry date set for it.

Link to Cookie Reference

ebilgin · Answer 4 · 2015-10-16T10:19:21.757

You can update anchors href attributes at Document Ready. Below code solution for current HTML querystrings carries over the selected anchors href attributes.

var selectedAnchors = $("a");

selectedAnchors.each( function () {

    var itemHref = $(this).attr("href");

    if ( itemHref.indexOf("?") > -1 )
        itemHref += "&";
    else
        itemHref += "?";

    itemHref += location.search.substr(1);

    $(this).attr("href", itemHref );

});

score 1 · Answer 5 · edited Sep 08 '18 at 05:58

Please try this. Just replace word "something" with your own parameter.

Thanks

$("a").click(function(e){
    e.preventDefault();
    var a = $(this).attr('href');
    var something = getUrlParameter('something');
    var newURL = a+"?something="+something;
    window.location.href = newURL;
});

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

HTML:

<a href="http://google.com/">Google</a>

He didn't mentioned and clearly provided the example which shows that there will be only link no parameters. — user2505019, Oct 14 '15 at 12:29

Sebastian Schneider · Accepted Answer · 2015-10-14T11:19:00.107

-4

This is possible (with php):

<a href="http://www.linkone.com/linktwo.html?something=
<?php echo $_GET["something"]; ?>"> Link Two </a>

edited Oct 14 '15 at 11:19

answered Oct 14 '15 at 11:18

Sebastian Schneider

4,896
3
20
47

Not an exact answer for this question. – ebilgin Oct 14 '15 at 11:18
@ebilgin but this is possible – Sebastian Schneider Oct 14 '15 at 11:19
4

PHP isn't tagged so this isn't suitable unless you ask if the OP would consider using server-side for something that can be done client-side. **Questions have tags for a reason.** – NewToJS Oct 14 '15 at 11:21
2

What if he has different querystring key different from "something" or he has keys more than one? – ebilgin Oct 14 '15 at 11:21
2

Upvoting this answer is a joke to SO. – ebilgin Oct 14 '15 at 11:31
@ebilgin I couldn't agree more. Sese Schneider should ask if php would be an option before offering a language that isn't tagged or offer a solution using a language that is tagged and have this as an optional choice. – NewToJS Oct 14 '15 at 11:34

Javascript/html keep url params

6 Answers6