如何通过GET方法提交多个name相同、值不同的表单输入项

解决方法 #

方案1：使用数组格式name属性（最推荐） #

这是表单提交多值字段的标准实现，只需将同名input的name属性末尾添加[]后缀即可，修改后的表单代码如下：

<form action="/gulv-finderen" method="get">
      <button disabled id="submitButton" class="btn">Send</button>
      <input disabled id="inputTaalerVand" type="hidden" name="pf_t_behov[]" value="Tåler vand" />
      <input disabled id="inputNemMontering" type="hidden" name="pf_t_behov[]" value="Nem montering" />
      <input type="hidden" name="pf_t_behov_and_condition" value="true" />
</form>

提交后生成的URL格式为：/gulv-finderen?pf_t_behov[]=Tåler+vand&pf_t_behov[]=Nem+montering&pf_t_behov_and_condition=true，几乎所有服务端开发框架都原生支持解析这种格式的参数，直接可以拿到包含所有选中值的数组。

注意：带disabled属性的输入框默认不会被提交，你所谓的「激活」操作需要先移除对应input的disabled属性，值才会被正常传递。

方案2：JS拦截提交手动构造URL（兼容特殊参数名要求） #

如果你必须保留pf_t_behov作为参数名（不带[]后缀），可以拦截表单的submit事件，自己收集所有符合条件的字段值拼接目标URL再跳转，示例代码如下：

const form = document.querySelector('form[action="/gulv-finderen"]');
form.addEventListener('submit', function(e) {
  // 阻止默认提交行为
  e.preventDefault();
  // 收集所有非disabled的pf_t_behov值
  const behovValues = Array.from(document.querySelectorAll('input[name="pf_t_behov"]:not(:disabled)'))
    .map(input => `pf_t_behov=${encodeURIComponent(input.value)}`)
    .join('&');
  // 拼接其他固定参数
  const otherParams = 'pf_t_behov_and_condition=true';
  // 跳转目标地址
  window.location.href = `${form.action}?${behovValues}&${otherParams}`;
})

使用这个方案无需修改input的name属性，即可生成你预期的URL格式。

内容的提问来源于stack exchange，提问作者Casper