将值附加到 URL

Question

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

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

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

和

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

并且每个都来自不同的形式。

假设我提交了第一份表格。 url 变为：

.../?checkbox1=test1

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

.../?button1=a button

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

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

我该怎么做？

谢谢

Answer 1

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

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

Answer 2

有一个表格或这样做

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

将值附加到 URL

Appending values to a URL

html

forms

url

append

e-commerce