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>

Answer 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(',')}`);
});