如何在JavaScript中将表单ID作为变量实现脚本复用？

当然可以实现脚本复用，不用为每个表单单独写函数，下面提供几种实用的方案：

方案1：让函数接收表单ID作为参数 #

直接修改onSubmit函数，让它额外接收表单ID参数，调用时传入对应表单的ID即可：

function onSubmit(token, formId) {
  document.getElementById(formId).submit();
}

调用示例 #

如果是通过按钮触发：

<form id="formname">
  <!-- 表单内容 -->
  <button onclick="onSubmit(token, 'formname')">提交</button>
</form>

如果是配合reCAPTCHA这类工具的回调，可以用匿名函数包装传参：

<form id="formname">
  <!-- 表单内容 -->
  <div class="g-recaptcha" data-sitekey="你的站点密钥" data-callback="function(token) { onSubmit(token, 'formname'); }"></div>
</form>

方案2：用闭包创建绑定特定表单的提交函数 #

通过一个工厂函数，提前绑定表单ID，生成对应表单的专属提交函数，逻辑复用的同时调用更简洁：

// 工厂函数：传入表单ID，返回对应的提交处理函数
function createSubmitHandler(formId) {
  return function(token) {
    document.getElementById(formId).submit();
  };
}

// 为不同表单生成处理函数
const submitFormA = createSubmitHandler('formA');
const submitFormB = createSubmitHandler('formB');

调用示例 #

<form id="formA">
  <!-- 表单内容 -->
  <div class="g-recaptcha" data-sitekey="你的站点密钥" data-callback="submitFormA"></div>
</form>

<form id="formB">
  <!-- 表单内容 -->
  <div class="g-recaptcha" data-sitekey="你的站点密钥" data-callback="submitFormB"></div>
</form>

方案3：不依赖表单ID，通过DOM关系获取表单 #

如果触发提交的元素（比如按钮、验证码组件）在表单内部，可以直接通过DOM关系定位表单，彻底摆脱ID的限制：

function onSubmit(token) {
  // 从触发事件的元素向上查找最近的表单
  const form = event.target.closest('form');
  if (form) {
    form.submit();
  }
}

调用示例 #

<form id="any-form-id">
  <!-- 表单内容 -->
  <div class="g-recaptcha" data-sitekey="你的站点密钥" data-callback="onSubmit"></div>
</form>

<form id="another-form">
  <!-- 表单内容 -->
  <button onclick="onSubmit(token)">提交</button>
</form>

这种方案最灵活，同一个onSubmit函数可以用于任意表单，只要触发元素在表单范围内。

内容的提问来源于stack exchange，提问作者Jan-Peter Rühmann