Redirect User To Current Page With Some Querystring Using Javascript

When a person clicks on a link, I want to do this: grab the text from a textbox encode the text redirect to currentpage.aspx?search=textboxvalue I have this so far but its not wo

Solution 1:

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

functionreloadWithQueryStringVars (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() )});

Solution 2:

window.location.href = window.location.href + "?search=" + escape( $("#someId").val()); ?

Solution 3:

How about:

window.location = "/currentpage.aspx?search=" + escape( $("#someId").val());

or

window.location = window.location.pathname + "?search=" + escape( $("#someId").val());

Etc...

Solution 4:

The problem with appending something to window.location.href is what if you have already done that? You'll just keep appending "?search=..." multiple times. More importantly, it's more complicated than it needs to be.

You're already using jQuery. Why not just do this?

<form id="search" method="get">
<input type="text" name="search">
</form>
<a href="#"id="go">Search</a>

with:

$(function() {
  $("#go").click(function() {
    $("#search").submit();
    returnfalse;
  });
});

and then you don't have to worry about the right URL, encoding, etc.

Solution 5:

You are changing the wrong location property if you only want to change the search string. I think you want to do this:

location.search = "?search=" + encodeURIComponent( $("#someId").val());