Grab URL parameters to maintain search form options using jQuery or javascript

Question

I have a set of search filters that set a URL string (for further processing). As the page reloads to show the results, the options selected by the user are lost. I was wondering if it's possible to use jquery to capture the parameters from the url and 'remember' what options had been selected?

For example, if my URL contained www.something.com/index.html?&colour=red&circle=1&star=0, my form would load with the following:

<h3>Colour</h3>
<p>Blue: <input name="colour" type="radio" value="blue" /></p>
<p>Red: <input name="colour" type="radio" value="red" /></p> [selected]
<p>Green: <input name="colour" type="radio" value="green" /></p>

<h3>Shape</h3>
<p>Circle: <input name="circle" type="checkbox" value="1" /></p> [selected]
<p>Square: <input name="square" type="checkbox" value="1" /></p>
<p>Star: <input name="star" type="checkbox" value="1" /></p>

Thanks for looking.

El Guapo · Accepted Answer · 2011-07-01 15:07:50Z

1

You can use the following JS object

location.search

This will give you the Query String Params of your address bar

answered Jul 1, 2011 at 15:07

El Guapo

5,7917 gold badges58 silver badges88 bronze badges

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

Comments

Samuel Liew · Accepted Answer · 2011-07-01 15:16:51Z

0

<script type="text/javascript">
function getQueryStr(name) {
    hu = window.location.search.substring(1);
    gy = hu.split("&");
    for (i=0;i<gy.length;i++) {
        ft = gy[i].split("=");
        if (ft[0] == ji) {
            return ft[1];
}}}

$(document).ready(function() {
    $('input[name=color]').val(getQueryStr("colour"));
    $('input[name=circle]').prop("checked", (getQueryStr("circle")=="1"));
    $('input[name=square]').prop("checked", (getQueryStr("square")=="1"));
    $('input[name=star]').prop("checked", (getQueryStr("star")=="1"));
});
</script>

edited Jul 1, 2011 at 15:16

answered Jul 1, 2011 at 15:11

Samuel Liew

79.5k112 gold badges173 silver badges318 bronze badges

2 Comments

Willb Over a year ago

I really like this option as it will fit well with what I have. However, although the checkbox part is working, I can't seem to get the radio buttons to select.

Willb Over a year ago

Don't know if this is the best way but I managed to get the radio button set working by using the variable var whichcolor = querySt("color"); and then using $('input[name=color][value='+whichcolor+']').attr('checked', 'checked'); which seems to be working.

Schroedingers Cat · Accepted Answer · 2011-07-01 15:09:08Z

0

This information is held on the location object Location in javascript from where you will have to extract the parameters.

answered Jul 1, 2011 at 15:09

Schroedingers Cat

3,1392 gold badges19 silver badges34 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:13:20Z

0

You could get url parameter using this function (look here Append urlVariable to next page's link):

function getParameterByName( name )

    {
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
      if( results == null )
        return "";
      else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
    }

var colour= getParameterByName('colour');
var circle= getParameterByName('circle');
var star= getParameterByName('star');

When you have the parameters then it's easy to select them:

$('input[name=colour][value='+colour+']').attr('checked', 'checked');

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jul 1, 2011 at 15:11

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

2 Comments

Chris Pratt Over a year ago

Selecting by value is a bad idea. It's not uncommon for the same value to be in multiple fields.

Willb Over a year ago

Thanks for this. I've just tested your solution but none of the form values are selected?

marapet · Accepted Answer · 2011-07-02 12:02:15Z

0

Unless there is a particular reason you need to do this on the client side:

This usually is done on the server side. You can check for parameters on the server side (which you probably do anyway) and send the HTML markup with preselected checkboxes back to the client.

On the plus side, this will also work with javascript disabled browsers as well as search engines.

answered Jul 2, 2011 at 12:02

marapet

56.9k13 gold badges176 silver badges186 bronze badges

Collectives™ on Stack Overflow

Grab URL parameters to maintain search form options using jQuery or javascript

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related