How to pre-populate checkboxes based on URL parameters

Question

I am trying to pre-populate checkboxes based on URL parameters. I have no experience with javascript so I can't get other solutions to work for me.

Consider the following setup:

<form method='GET'>
  <input type="checkbox" name="a" value="1" id="1"/>
  <input type="checkbox" name="a" value="2" id="2"/>
  <input type="checkbox" name="a" value="3" id="3"/>
  <button type="submit">Apply</button>
</form>

I want the second checkbox and first checkbox to be ticked when ?a=2&a=1 is observed in the URL.

This is what I have tried but the code does not work.

<script>
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]);
  let id=decodeURIComponent(sParameter[1]);

  let collection = document.getElementById(id)
  for(j in collection){
    if(collection[j].id==id)collection[j].checked=true
  }
}
</script>

1. if comparison should have ==. 2. Use URLSearchParams. 3. value and id should be inside quotes — boxdox
– boxdox, Commented Jul 4, 2021 at 11:19
Fixed points 1 & 3 but for point 2 do you mean something like URLSearchParams(window.location.search.substring(1)) — Andy
– Andy, Commented Jul 4, 2021 at 11:27
developer.mozilla.org/en-US/docs/Web/API/URLSearchParams. You don't have to manually split and check — boxdox
– boxdox, Commented Jul 4, 2021 at 11:28
in html code id and value will be in double quotes. and in javascript this do this document.getElementById(window.location.href.split("?a=")[1]).checked=true — Amit Chauhan
– Amit Chauhan, Commented Jul 4, 2021 at 11:31
Mmm, it works for single parameter but fails for multiple ?a=1&a=3 Maybe I should have made that clearer. — Andy
– Andy, Commented Jul 4, 2021 at 11:42

Rajdeep D · Accepted Answer · 2021-07-04 11:51:25Z

1

You can follow this kind of approach

let fakeQueryString = "a=2&a=3"; //replace it with actual url
let searchParms = new URLSearchParams(fakeQueryString);

for(const [key,val] of searchParms)
  document.getElementById(val).checked = true;

<form method='GET'>
  <input type="checkbox" name="a" value="1" id="1"/>
  <input type="checkbox" name="a" value="2" id="2"/>
  <input type="checkbox" name="a" value="3" id="3"/>
  <button type="submit">Apply</button>
</form>

answered Jul 4, 2021 at 11:51

Rajdeep D

3,9201 gold badge12 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to pre-populate checkboxes based on URL parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related