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.

score 1 · Answer 1 · answered Jul 01 '11 at 15:07

1

You can use the following JS object

location.search

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

answered Jul 01 '11 at 15:07

El Guapo

5,581
7
54
82

score 0 · Answer 2 · answered Jul 01 '11 at 15:09

0

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

answered Jul 01 '11 at 15:09

Schroedingers Cat

3,099
1
15
33

score 0 · Answer 3 · edited May 23 '17 at 12:13

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 '17 at 12:13

Community

1
1

answered Jul 01 '11 at 15:11

Nicola Peluchetti

76,206
31
145
192

Selecting by value is a bad idea. It's not uncommon for the same value to be in multiple fields. – Chris Pratt Jul 01 '11 at 15:13
Thanks for this. I've just tested your solution but none of the form values are selected? – Willb Jul 01 '11 at 15:47

Samuel Liew · Accepted Answer · 2011-07-01T15:16:51.793

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 01 '11 at 15:16

answered Jul 01 '11 at 15:11

Samuel Liew

76,741
107
159
260

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 Jul 01 '11 at 15:29
1

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. – Willb Jul 04 '11 at 11:54

score 0 · Answer 5 · answered Jul 02 '11 at 12:02

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.

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

5 Answers5

Linked