Append a param onto the current URL

Question

I'd like to have a little easter egg button in the corner of a project site. When clicked, it just drops a string onto the current url and reloads the page.

So if I'm on: http://test.com/projects/view/134

The button is clicked

Page reload on: http://test.com/projects/view/134?ts=true

Not really sure how I might go about doing so though.

Community · Accepted Answer · 2015-11-16 19:05:37Z

35

try this code,

var separator = (window.location.href.indexOf("?")===-1)?"?":"&";
window.location.href = window.location.href + separator + "ts=true";

EDITS: to avoid duplicated parameter or very large string in your url, you need to replace the old param it already exists.

var url=window.location.href,
    separator = (url.indexOf("?")===-1)?"?":"&",
    newParam=separator + "ts=true";
    newUrl=url.replace(newParam,"");
    newUrl+=newParam;
    window.location.href =newUrl;

edited Nov 16, 2015 at 19:05

CommunityBot

11 silver badge

answered Jan 5, 2012 at 4:31

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

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

3 Comments

fabiangebert Over a year ago

but what if the URL contains a hash?

Chamika Sandamal Over a year ago

@fabiangebert: location.hash will gives you the hash value. hope you can update the rest as you needed :)

Antony D'Andrea Over a year ago

This doesn't avoid the duplicate parameter as you assume the new param has the same value as the old one. But can work if you add a regex for the old one, such as

rparam =  separator + "ts=",                     newParam = param + $(this).val(),                     regex = new RegExp(param+"[^\&]*");                     newUrl = url.replace(regex, "");

Adam Rackis · Accepted Answer · 2012-01-05 04:59:13Z

27

You can assign location.href to the value it currently has, plus your new querystring:

(edited to be friendly to existing querystrings)

$("#yourButtonId").click({
    var loc = location.href;
    if (loc.indexOf("?") === -1)
       loc += "?";
    else
       loc += "&";
    location.href = loc + "ts=true";
});

Or to be more succinct:

$("#yourButtonId").click({
    var loc = location.href;        
    loc += loc.indexOf("?") === -1 ? "?" : "&";

    location.href = loc + "ts=true";
});

edited Jan 5, 2012 at 4:59

answered Jan 5, 2012 at 4:26

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Comments

Vianney Bajart · Accepted Answer · 2017-05-24 14:15:32Z

18

Using:

Example:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

// Build result
url.toString();

answered May 24, 2017 at 14:15

Vianney Bajart

8,4202 gold badges15 silver badges10 bronze badges

2 Comments

Iftah Over a year ago

sadly not yet supported by all browsers caniuse.com/#feat=urlsearchparams

kingPuppy Over a year ago

@iftah according to the documentation URL can be accessed on non-supporting browsers through calling window.URL......Ex.(new window.URL('url')) developer.mozilla.org/en-US/docs/Web/API/URL

Pikamander2 · Accepted Answer · 2020-01-21 08:40:11Z

6

Make full use of the location DOM API, and count in hash:

location.protocol + '//' + location.hostname + location.pathname + 
    (location.search ? location.search + '&a=b' : '?a=b') +
    location.hash;

edited Jan 21, 2020 at 8:40

Pikamander2

8,4504 gold badges58 silver badges75 bronze badges

answered Feb 13, 2017 at 9:47

harttle

981 silver badge12 bronze badges

1 Comment

ambidexterous Over a year ago

I believe you missed location.hostname, should be location.protocol + '//' + location.hostname + location.pathname + ...

fabiangebert · Accepted Answer · 2014-04-08 09:20:44Z

3

If you want to account for the potential existence of a hash "#" in the URL, proceed as follows:

var href = location.href;
var hasQuery = href.indexOf("?") + 1;
var hasHash = href.indexOf("#") + 1;
var appendix = (hasQuery ? "&" : "?") + "ts=true";
location.href = hasHash ? href.replace("#", appendix + "#") : href + appendix;

answered Apr 8, 2014 at 9:20

fabiangebert

2,6332 gold badges22 silver badges27 bronze badges

Comments

Bobbzorzen · Accepted Answer · 2016-08-17 12:29:25Z

I found the previous answers lacking and as such here is a method that better handles other parameters in current querystring

appendToQueryString = function (param, val) {
    var queryString = window.location.search.replace("?", "");
    var parameterListRaw = queryString == "" ? [] : queryString.split("&");
    var parameterList = {};
    for (var i = 0; i < parameterListRaw.length; i++) {
        var parameter = parameterListRaw[i].split("=");
        parameterList[parameter[0]] = parameter[1];
    }
    parameterList[param] = val;

    var newQueryString = "?";
    for (var item in parameterList) {
        if (parameterList.hasOwnProperty(item)) {
            newQueryString += item + "=" + parameterList[item] + "&";
        }
    }
    newQueryString = newQueryString.replace(/&$/, "");
    return location.origin + location.pathname + newQueryString;
}

You have to use location.href = appendToQueryString(ts, true) to actually reload the page.

So you split the whole query string, add one element and put it back together? Why would you do that instead of just appending the new parameter? makes no sense to me.

Sudhir Bastakoti · Accepted Answer · 2012-01-05 04:27:22Z

2

Do you mean:


$(document).ready(function() {
    $("#yourButtonId").click(function() {
       var currentUrl = window.location.pathname + "?ts=true";
    });
});

answered Jan 5, 2012 at 4:27

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Comments

Babacar Diop · Accepted Answer · 2017-09-22 17:08:53Z

1

See the documentation of the history API :

https://developer.mozilla.org/en-US/docs/Web/API/History_API

Example of usage:

var obj = { Title: title, Url: url }; history.pushState(obj, obj.Title, obj.Url);

answered Sep 22, 2017 at 17:08

Babacar Diop

213 bronze badges

Comments

Envil · Accepted Answer · 2016-12-01 09:43:15Z

An improvement from @Bobbzorzen answer, with ability to delete param by passing its name only:

function AlterQueryString(param, val) {
    var queryString = window.location.search.replace("?", "");
    var parameterListRaw = queryString == "" ? [] : queryString.split("&");
    var parameterList = {};
    for (var i = 0; i < parameterListRaw.length; i++) {
        var parameter = parameterListRaw[i].split("=");
        if (typeof val != 'undefined') {
            parameterList[parameter[0]] = parameter[1];
        } else if (param != parameter[0]) {
            parameterList[parameter[0]] = parameter[1];
        }
    }
    if (typeof val != 'undefined') {
        parameterList[param] = val;
    }

    var newQueryString = Object.keys(parameterList).length > 0 ? "?" : "";
    for (var item in parameterList) {
        if (parameterList.hasOwnProperty(item)) {
            newQueryString += item + "=" + parameterList[item] + "&";
        }
    }
    newQueryString = newQueryString.replace(/&$/, "");
    return location.origin + location.pathname + newQueryString;
}

gist: https://gist.github.com/envil/bc1832503bef55ffdabb0cde32bb06f1

Malik Zahid · Accepted Answer · 2021-12-07 07:15:33Z

0

HTML5 introduced the history.pushState(page, caption, replace_url) that should not reload your page. OR if you want to modify while page load you can do this.

var currentURL = www.getitsol.com;
window.location.replace(currentURL + "?data=" + data.result, "_self");

answered Dec 7, 2021 at 7:15

Malik Zahid

7656 silver badges16 bronze badges

Collectives™ on Stack Overflow

Append a param onto the current URL

10 Answers 10

3 Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Related