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