How to get query string from URL using Javascript or jQuery to populate select values?

Question

I have 3 select or option drop lists that based on what the users selects needs to populate or select the select value of the drop list based on the query string. So I guess I need help getting the URL and query string and find out if it contains any of what the user selected to populate the select value.

Right now my select values are not persistent when a user selects them, then submits a search. How would I keep them persistent with Javascript or jQuery? My other issue is that the user can search All options, I have that working but there is a Checkbox that places a value and the value is read to search everything. How would I, on the first page load, have that check box checked and the query string of '?search=%20%20%200' to populate the URL query string. Thanks in advance.

Here is my current JS:

var resourceGradeId;
var resourceContentId;
var resourceProgramTypeId;
var resourceSearchAll;

$(document).ready(function() {

var searchAll = '<strong>' + "All" + '</strong>';
$('#xsltsearch_summary .dmnsSearchResultNumber:contains("0")').replaceWith(searchAll); 

$("#resourceSelect").click(function (event) { 
resourceGradeId = $('#teachersResourceSearchGrade').val();
 resourceContentId = $('#teachersResourceSearchContent').val();
 resourceProgramTypeId = $('#teachersResourceSearchProgramType').val(); 
resourceSearchAll = $('#teachersResourceSearchAll').val();
window.location.href = '/teachers/classroom-resources?search=' + resourceGradeId + ' ' + resourceContentId + ' ' + resourceProgramTypeId + ' ' + resourceSearchAll;
    });

$("select option").attr('disabled', false);

    $(":checkbox").click(function(event) { 
    //reset values
    if($(":checkbox").is(":checked")){
          $("#teachersResourceSearchGrade").val('');
          $("#teachersResourceSearchContent").val('');
          $("#teachersresourceProgramTypeId").val('');
          $("#teachersResourceSearchAll").val('0');
          $("select").attr('disabled', true);
        }
    else
        { 
          $("#teachersResourceSearchAll").val('');
          $("select").attr('disabled', false);
          $("select option").attr('disabled', false);
          }
     });
});

This [Question][1] might help you [1]: http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript — Diego Lins de Freitas, Apr 17 '12 at 17:13

score 1 · Answer 1 · answered May 28 '14 at 17:01

To check for the variables in the url

getUrlVars()["search"];

This will get the value of example.com/page?search=yolo%20no

And to put the value of search it's just a form

<form method="get"><input type="text" name="search"/></form>

This is the same with the select menu

<form method="get"><select name="dropdown"><option>Option 1</option></select></form>

score 0 · Accepted Answer · answered Apr 17 '12 at 23:08

0

Just used this

var myQuery = window.location.search.substring(1);

// alert(myQuery);

if(myQuery == ''){

  window.location.href = document.URL + '?search=%20%20%200';

$(":checkbox").attr('checked', 'checked');

//alert('no query');

}else if(myQuery == 'search=%20%20%200'){

  $(":checkbox").attr('checked', 'checked');

} 

else{

}

answered Apr 17 '12 at 23:08

ClosDesign

3,894
9
39
62

Wow this is from a while back. This is actually the solution. – ClosDesign May 29 '14 at 18:10

How to get query string from URL using Javascript or jQuery to populate select values?

2 Answers2