如何在无jQuery环境下，表单提交时异步添加隐藏字段

需求背景 #

现有一段运行正常的jQuery表单处理代码，需移除jQuery依赖，改用原生JavaScript实现相同功能。

表单HTML代码 #

<form action="/document-link/" method="POST" class="form">
    <input type="text" name="foo" value=""></input>
    <button type="submit">Submit</button>
</form>

原jQuery实现代码 #

$('.form').each(function() {
    var frm = this;
    $(frm).bind('submit', function() {
        $.ajax({
            url: '/libs/form-check.php',
            data: { value: $('input[name="foo"]', frm).val() },
            async: false,
            dataType: 'json',
            success: function(data) {
                $(frm).append('<input type="hidden" name="approval" value="' + data + '" />');
            }
        });
    });
});

原生JS初始框架 #

const forms = document.querySelectorAll('.form');
forms.forEach(function(frm) {
    frm.addEventListener('submit', (e) => {
        // 这里需要实现AJAX请求并创建隐藏字段
    },false);
});

表单业务流程 #

• 提交表单
• 服务端验证字段
• 验证不通过：返回带有错误样式类的完整表单页面
• 验证通过：
  • 重新加载页面，移除表单并显示提示信息
  • 或跳转到后端配置的自定义页面

核心问题 #

需要保留传统的表单提交流程（不通过AJAX提交完整表单），但submit事件会立即触发，无法直接等待异步fetch请求完成后再执行提交。

尝试的临时解决方案（可行但不够优雅） #

document.getElementById("myForm").addEventListener("submit", function(e) {
  const approval = this.querySelector('[name="approval"]');
  if(!approval) { // 检查DOM中是否已有隐藏字段，没有则发起请求
    e.preventDefault(); // 阻止默认提交行为
    const thisForm = this; // 保存当前表单元素
    fetch('/libs/form-check.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ value: this.foo.value })
    })
      .then((response) => response.json())
      .then(data => {
        const ele = document.createElement("input");
        ele.name = "approval";
        ele.type = "hidden";
        ele.value = data; // 若后端返回对象（如{approval:"yes"}），则改用data.approval
        thisForm.appendChild(ele);
        thisForm.querySelector('[type="submit"]').click(); // 再次触发表单提交
        // thisForm.submit(); 此方法仅刷新页面，无法触发完整表单提交流程
      })
  }
})

注：原代码中fetch缺少请求方法和Content-Type配置，此处补充以匹配原jQuery AJAX的请求行为。

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