Function to select options and check checkboxes based on URL params on document ready

Question

I need a function to loop all URL parameters and to auto select options based on id and value, plus auto check checkboxes based on name and value. I'm already using getUrlParameter function found here: https://stackoverflow.com/a/21903119, so what I need is kind of a loop all parameters found in URL on document.ready and set select options and input checkboxes accordingly.

url: htt....// domain.com/ site / page?param1=val1&param2=val2

and if match param1, param2 with any select option id or checkbox name: 1) if is select option check the corresponding value ... or 2) if is checkbox and if has the same value shown in url param check it

Edit: since someone edited my title I have to mention: it should be javascript, jQuery not an option for this situation.

You dont need any code, there is no particular situation. – Sorin GFS Nov 21 '18 at 13:23 — Sorin GFS, Nov 21 '18 at 13:23

FZs · Accepted Answer · 2018-11-25T11:25:55.483

1

I tried to reach what you want, I hope this will help.

You can do it with this code:

var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (i in sURLVariables) { 
  let sParameter =sURLVariables[i].split('='); 
  let name=sParameter[0]
  let value=decodeURIComponent(sParameter[1])
  //Here is a loop
  //Do something for each name-value pair
  let collection = document.getElementsByName(name)
  for(j in collection){
    //searching for matching names (for checkboxes)
    if(collection[j].value=value)collection[j].checked=true
  }
  let node = document.getElementById(name)
  //checking element by ID (for select lists)
  if(node){
    node.value=value
  }
}

Example:

Query string:

?a=b&c=d&e=f

HTML:

<select id="a"><!-- Will be set to b-->
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<input type="checkbox" name="c" value="d"/><!--Will be checked-->
<input type="checkbox" name="c" value="f"/><!--Will NOT be checked-->
<input type="checkbox" name="e" value="d"/><!--Will NOT be checked-->

edited Nov 25 '18 at 11:25

answered Nov 21 '18 at 13:56

FZs

16,581
13
41
50

Thank you for help, I also need the code part to chech checkboxes and select option radios since I'm noob in JS. Also the part with document.ready.. – Sorin GFS Nov 21 '18 at 14:08
@SorinGFS Ok, but please write your HTML code to your question. (Or an example...) – FZs Nov 21 '18 at 15:26
There is nothig specific to be mentioned, I have lots of option selectors (with id's) and lots of input checkboxes (with names, not id's), all I want is when the page is fully loaded to run the script and to check every url param and to loop thru elements and check them if has correct value, same as within url param. – Sorin GFS Nov 21 '18 at 15:44
@SorinGFS And what must be to do if an element has the correct value? And what if it has incorrect? – FZs Nov 21 '18 at 15:48
If element has correct value it must be selected/checked. If not... nothing. – Sorin GFS Nov 21 '18 at 15:55

score 0 · Answer 2 · answered Nov 21 '18 at 13:28

You can do something like this:

jQuery.each(parameters, function (index, item){
                    var element = elt.find("[name=" + item.name + "]");
                    if (element.is("select")) {
                        element.find("option[value=" + item.value + "]").prop("selected", true);
                    } else {
                        element.val(item.value);
                    }
                });

Function to select options and check checkboxes based on URL params on document ready

2 Answers2