将值附加到 URL答案

【问题标题】：Appending values to a URL将值附加到 URL
【发布时间】：2022-01-17 02:56:17
【问题描述】：

所以我正在建立一个电子商务网站，我在产品页面。我想要一个过滤器系统，其中过滤器值附加到现有 URL，而不是加载最新过滤器参数的新 URL。

例如，如果我有两个这样的元素：

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

和

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

每个都来自不同的形式。

假设我提交了第一个表单。网址变成：

.../?checkbox1=test1

当我也提交第二个表单（提交第一个表单后）时，url 现在变成：

.../?button1=一个按钮

但我希望将按钮的值附加到第一个网址，例如：

.../?checkbox1=test1&button1=一个按钮

我该怎么做？

谢谢

【问题讨论】：

只有一个表格...
如果我决定有多个表格怎么办？

标签： html forms url append e-commerce

【解决方案1】：

有一个表格或这样做

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

【讨论】：

【解决方案2】：

你为什么不这样走？只有单一形式：

<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>

【讨论】：