How to format html form checkbox URL parameters to \?var1=X,Y,Z

Question

我有一个 html 表单，可以将复选框组 (X,Y,Z) 的参数发送到 URL，如下所示：

https://mycompany.com/?var1=X&var1=Y&var1=Z

我想更改表单发送变量的方式，因此 URL 的格式如下：

https://mycompany.com/?var1=X,Y,Z

我很乐意使用任何类型的代码，但更喜欢 twig。

任何想法或建议将不胜感激。

作为这个级别的新手，我尝试猜测各种 twig 和 Java 脚本，但没有提供上述理想结果。

基本表格代码如下：

<form>
<div class="form-group">
<input type="checkbox" name="var1" id="rx" value="X">
<label>Label X</label>
<input type="checkbox" name="var1" id="ry" value="Y">
<label>Label Y</label>
<input type="checkbox" name="var1" id="rz" value="Z">
<label>Label Z</label>
</div>
<div class="form-group">
<button type="get" class="button button1">Submit</button>
</div>
</form>

Answer 1

您需要使用

JavaScript

来更改表单的默认行为并自己重写 URL。

document.addEventListener("DOMContentLoaded", function() {
  let form = document.getElementById('myform');
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    let checkboxes = [];
    document.getElementsByName('var1').forEach(function(checkbox) {
      if (checkbox.checked) checkboxes.push(checkbox.value);
    });
    window.location = '?var1=' + checkboxes.join(',');
  });
});

<form id="myform">
  <div class="form-group">
    <input type="checkbox" name="var1" id="rx" value="X">
    <label>Label X</label>
    <input type="checkbox" name="var1" id="ry" value="Y">
    <label>Label Y</label>
    <input type="checkbox" name="var1" id="rz" value="Z">
    <label>Label Z</label>
  </div>
  <div class="form-group">
    <button type="submit" class="button button1">Submit</button>
  </div>
</form>

---

仅供参考：

get

不是按钮属性类型的有效值 - reference