redirect user to current page with some querystring using javascript

javascript, jquery

Solution

I needed to do something similar to what you wanted so I put together a function that allows you to do it. I hope it is found useful. I have tested it pretty extensively and not found any issues, please don't hesitate to let me know if any issues are found.

The Function

function reloadWithQueryStringVars (queryStringVars) {
    var existingQueryVars = location.search ? location.search.substring(1).split("&") : [],
        currentUrl = location.search ? location.href.replace(location.search,"") : location.href,
        newQueryVars = {},
        newUrl = currentUrl + "?";
    if(existingQueryVars.length > 0) {
        for (var i = 0; i < existingQueryVars.length; i++) {
            var pair = existingQueryVars[i].split("=");
            newQueryVars[pair[0]] = pair[1];
        }
    }
    if(queryStringVars) {
        for (var queryStringVar in queryStringVars) {
            newQueryVars[queryStringVar] = queryStringVars[queryStringVar];
        }
    }
    if(newQueryVars) { 
        for (var newQueryVar in newQueryVars) {
            newUrl += newQueryVar + "=" + newQueryVars[newQueryVar] + "&";
        }
        newUrl = newUrl.substring(0, newUrl.length-1);
        window.location.href = newUrl;
    } else {
        window.location.href = location.href;
    }
}

How to Use It

The function accepts an object literal as its only argument. The object literal should contain the query string variable(s) that you want to reload the page with. It accounts for existing variables and will override an existing one if you specify it in the object literal you pass.

So, lets say our location is `http://localhost/helloworld.php` and I want to redirect to the current page with a query string variable `foo` whose value should be `bar`, I'd call the function as follows:

reloadWithQueryStringVars({"foo": "bar"});

The browser will navigate to `http://localhost/helloworld.php?foo=bar`. And If I pass the function the following:

reloadWithQueryStringVars({"foo": "bar2"});

The browser will navigate to `http://localhost/helloworld.php?foo=bar2`.

As the function accepts a object literal, you can pass multiple properties to the function for multiple query string vars. If I'm still at `http://localhost/helloworld.php?foo=bar2` and I call function as follows

reloadWithQueryStringVars({"foo": "bar3", "answer": "42", "bacon": "tasty"});

The browser will navigate to `http://localhost/helloworld.php?foo=bar3&answer=42&bacon=tasty`

Your Use Case

In answer to the question however, you'd call the function as follows:

reloadWithQueryStringVars({"search": escape( $("#someId").val() )});

Problem

Original source