Populate attribute value based on variable in URL string

Question

Let's say I'm on a page on my website: http://www.example.com/SearchResults.asp?Search=stackoverflow. Is it possible to use a JavaScript or jQuery code to get the variable "search" from the URL string and populate it into the value of the search box?

Basically I'll have my regular identified search box:

<input type="text" title="Search" id="search_box" />

And a user will search for something, but I will want a JavaScript or jQuery code that will get the value from the "search" variable in the URL string when the customer is on the Search.asp page and add it as the "value" to the input#search.

So the user will be on this page: http://www.example.com/SearchResults.asp?Search=stackoverflow and the search box will look like:

<input type="text" title="Search" id="search_box" value="stackoverflow" />

Thanks

Andrew Odri · Accepted Answer · 2011-12-25 23:50:23Z

2

You could try this function:

function getSearchVariable(variable) 
{
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){
            return unescape(pair[1]);
        }else{
            return false;
        }
    }
}

If this function is present in the sample you mentioned above, all you would call getSearchVariable("Search") to have "stackoverflow" returned.

So in your page, you would have a script element that looks like:

<script type="text/javascript">
    function getSearchVariable(variable) 
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){
                return unescape(pair[1]).split("+").join(" ");
            }else{
                return "";
            }
        }
    }

    $(document).ready(function(){
        $("#search_box").val(getSearchVariable("Search"));
    });
</script>

Hope that helps!

edited Dec 25, 2011 at 23:50

answered Dec 25, 2011 at 22:50

Andrew Odri

9,5286 gold badges48 silver badges56 bronze badges

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

9 Comments

Andrew Odri Over a year ago

This is also another nice function: (And a little less verbose than mine) css-tricks.com/snippets/javascript/get-url-variables

henryaaron Over a year ago

I realized I cannot edit these since I barely know anything about JavaScript. The actual pages and id's are different that what I initially posted. The ID of the search input is actually search_box and the page is actually SearchResults.asp. What do I change in the code above to make it work for me?

henryaaron Over a year ago

Wow this works excellently. One problem is when there is nothing in the search box, it says false. I just changed return false; to return ; and it worked! Another thing is the URL string changes spaces to "+" how can I have the script change the "+" back into spaces.

Andrew Odri Over a year ago

Ahh yeah, I had left the false in there for error checking; replacing it with return ""; if the best bet. I've updated the code to replace pluses with spaces.

henryaaron Over a year ago

Thanks, the pluses are still returning though. Also, another bothersome question, how can I have it only match "Search" I also have the variable "Searching" and when I'm on those pages I see "hing" in the search box.

|

Itay Maman · Accepted Answer · 2011-12-25 22:47:30Z

1

You can use the JQuery URI plugin (shamelessly written by yours truly) to extract any piece of the URL: Specifically, $.uri(window.location.href).at("query").search yields "stackoverflow" for the said URL.

The overall flow would be to register a callback (fired on page-load) to analyze the URL and set the value of that form element, that is:

<script>
  $(document).ready(function () {  
    $('#Search').val($.uri(window.location.href).at("query").search); 
  })
</script>

edited Dec 25, 2011 at 22:47

answered Dec 25, 2011 at 22:39

Itay Maman

30.8k12 gold badges93 silver badges124 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

JavaScript

document.getElementById('Search').value = [(window.location.search.match(/(?:^|[&;])Search=([^&;]+)/) || [])[1]];

jsFiddle.

The wrapping it with [] means that if the value was not found, it will return an empty string instead of undefined (which would be set to the input's value and shown as the undefined string).

jQuery

$('#Search').val(function() {
    return (window.location.search.match(/(?:^|[&;])Search=([^&;]+)/) || [])[1];
});

jsFiddle.

The (/* get GET param */ || []) is so the code will not error if the GET param was not found.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 25, 2011 at 22:37

alex

492k205 gold badges890 silver badges992 bronze badges

2 Comments

henryaaron Over a year ago

I don't know why it didn't work:

$('#search_box').val(function() {     return (window.location.searchresults.match(/(?:^|[&;])Search=([^&;]+)/) || [])[1]; });

the div's id is really search_box and the page's url is actually searchresults.asp. I modified the code accordingly, but it didn't work. Do you know why?

alex Over a year ago

@user your code is wrong. Why did you put searchresults in there?

Collectives™ on Stack Overflow

Populate attribute value based on variable in URL string

3 Answers 3

9 Comments

Comments

JavaScript

jQuery

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

JavaScript

jQuery

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related