Appending values to a URL-CodePudding

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

CodePudding user response：

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 button";
  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">

CodePudding user response：

Why you don't go like this ? Only single form :

<html>

<body>

  <form action="redirect.html">

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

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

    <input type="submit" name="submit-btn" value="submit">

  </form>

</body>

</html>