Appending values to a URL

Question

So I am building an ecommerce website and I am at the product page. I want a filter system where the filter values get appended to the existing URL instead of loading a new URL of the latest filter parameter.

For example, if I have two elements as such:

<input type="checkbox" name="checkbox1" value="test1">

and

<input type="button" name="button1" value="a button">

and each are from different forms.

Let's say I submit the first form. The url becomes:

.../?checkbox1=test1

When I also submit the second form (after submitting the first form), the url now becomes:

.../?button1=a button

But I want the value of the button to be appended to the first url like:

.../?checkbox1=test1&button1=a button

How do I go about this?

Thanks

Answer 1

Have ONE form or do this

document.querySelector("[name=button1]").addEventListener("click",function(e) {
  const chk = document.querySelector("[name=checkbox1]")
  const but =  this.value
  let url = "/?button1=a%20button";
  if (chk.checked) url +=`&${chk.name}=${chk.value}`;
  //location = url
  console.log(url)
})

<input type="checkbox" name="checkbox1" value="test1">
<input type="button" name="button1" value="a button">