如何用JavaScript通过事件触发GET方法提交隐藏HTML输入框且不使用submit类型

需求说明：通过事件触发GET方法提交隐藏的HTML输入框，禁止使用type="submit"的提交元素

静态HTML绑定事件实现方案 #

<!-- 提交表单，提前定义在页面中 -->
<form id="hiddenForm" method="GET" action="/submit-target">
  <!-- 隐藏输入框，可定义多个 -->
  <input type="hidden" name="userId" value="12345">
  <input type="hidden" name="source" value="event_trigger">
  <!-- 普通触发元素，不是submit类型 -->
  <button type="button" id="triggerBtn">点击提交</button>
</form>

<script>
// 绑定点击事件触发提交，也可以绑定其他任意事件（如页面加载、键盘事件等）
document.getElementById('triggerBtn').addEventListener('click', function() {
  // 直接调用表单原生submit方法，不需要submit元素
  document.getElementById('hiddenForm').submit();
});
</script>

动态生成表单提交方案（无需提前写HTML结构） #

如果不需要在页面中提前写入表单元素，可完全通过JS动态创建表单和隐藏输入后提交：

function submitHiddenDataByGet() {
  // 1. 动态创建表单元素
  const tempForm = document.createElement('form');
  tempForm.method = 'GET';
  tempForm.action = '/submit-target';
  // 表单设置为隐藏，不影响页面布局
  tempForm.style.display = 'none';

  // 2. 动态添加隐藏输入框，可添加多个
  const hiddenInput1 = document.createElement('input');
  hiddenInput1.type = 'hidden';
  hiddenInput1.name = 'userId';
  hiddenInput1.value = '12345';
  tempForm.appendChild(hiddenInput1);

  const hiddenInput2 = document.createElement('input');
  hiddenInput2.type = 'hidden';
  hiddenInput2.name = 'source';
  hiddenInput2.value = 'dynamic_form';
  tempForm.appendChild(hiddenInput2);

  // 3. 将表单插入页面后触发提交
  document.body.appendChild(tempForm);
  tempForm.submit();
  // 提交后可立即移除临时表单
  document.body.removeChild(tempForm);
}

// 绑定任意事件触发提交，例：页面加载完成后自动提交
window.addEventListener('load', submitHiddenDataByGet);

核心实现要点 #

• 表单显式指定method="GET"，提交后隐藏输入的name和value会自动拼接为URL的查询参数，符合GET请求规范
• 不需要声明type="submit"的元素，直接调用表单DOM的原生submit()方法即可完成提交
• 触发事件可自由选择，支持点击、页面加载、键盘事件、自定义事件等所有合法的JS事件类型

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