0

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.

Improve this question
1
  • You dont need any code, there is no particular situation. Commented Nov 21, 2018 at 13:23

2 Answers 2

Reset to default
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-->
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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..
@SorinGFS Ok, but please write your HTML code to your question. (Or an example...)
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.
@SorinGFS And what must be to do if an element has the correct value? And what if it has incorrect?
If element has correct value it must be selected/checked. If not... nothing.
0

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);
                    }
                });
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.