Updating URL with parameters from checkbox (without a hash)

Question

I am using the following code snippet to pass parameters to URL so the specific search can be accessed via the generated link.

For example, if Potato is selected, then the URL changes to example.com#potato

However, instead of appending the URL with a hash, I want to append ?filter=

So if Potato is selected, I want the URL to change to example.com?filter=potato

How can I achieve this?

$(function() {
  $(".vegetables, .seasoning").on("change", function() {
    var hash = $(".vegetables:checked, .seasoning:checked").map(function() {
      return this.value;
    }).toArray();
    hash = hash.join(",");
    location.hash = hash;
  });

  if (location.hash !== "") {
    var hash = location.hash.substr(1).split(",");
    hash.forEach(function(value) {
      $("input[value=" + value + "]").prop("checked", true);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h3>Filter recipes:</h3>

<div>
  <p>Select vegetables</p>
  <label><input type="checkbox" class="vegetables" value="potato"> Potato</label><br>
  <label><input type="checkbox" class="vegetables" value="onion"> Onion</label><br>
  <label><input type="checkbox" class="vegetables" value="tomato"> Tomato</label><br>
</div>

<div>
  <p>Select seasoning</p>
  <label><input type="checkbox" class="seasoning" value="salt"> Salt</label><br>
  <label><input type="checkbox" class="seasoning" value="pepper"> Pepper</label><br>
  <label><input type="checkbox" class="seasoning" value="chilli"> Chilli Flakes</label><br>
</div>

Rory McCrossan · Accepted Answer · 2022-07-14 14:29:26Z

1

You can use pushState() to update the current URL without reloading the page:

$(".vegetables, .seasoning").on("change", function() {
  var values = $(".vegetables:checked, .seasoning:checked").map((i, el) => el.value).get();
  window.history.pushState({}, '', `?filter=${values.join(',')}`);
});

answered Jul 14, 2022 at 14:29

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

Aaron Over a year ago

Thanks Rory! This does a great job at changing it to ?filter= instead of hash, which is great, but in using this snippet alone I lose the functionality of being able to refresh the page with the filtered URL and get those choices automatically selected by default (like my original code snippet does). How can I for those specific inputs to be checked on page load if they exist in the ?filter= parameter ?

Collectives™ on Stack Overflow

Updating URL with parameters from checkbox (without a hash)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related