Javascript 使用一个按钮提交多个表单

我已经看过了所有关于这个话题的帖子，但是还没有找到一个解决方案

在手柄的帮助下，我有多种形式的渲染，如下所示：

<ul>
  {{#each listRecords}}

      <form id="form{{id}}" action="/expand-list-records-save/{{../listId}}/{{id}}" method="POST">
          <div class="record-box">
              <li>{{recordTitle}} by {{artistName}} ({{releaseYear}})
                <br>
                  <div>
                      <label>Paste media embed code here:</label>
                      <textarea class="form-control form-control-lg" name="embeddedmedia" cols="30" rows="10">{{embeddedMedia}}</textarea>
                  </div>
                <br>
                <br>
              </li>
          </div>
        </div>
      </form>

  {{/each}}
</ul>
<input id="submit" class="btn btn-secondary btn-block" type="submit" value="Submit embed code" >

<script>
  $(document).ready(() => {
    $('#submit').click(function submitAllForms() {
      for (var i=0; i < document.forms.length; i++) {
        console.log(`submitting ${document.forms[i].id}`)
        document.forms[i].submit();
      }
    })
  })
</script>

我有一些问题。首先，此逻辑仅对页面上最后一个表单所针对的项执行POST请求。为什么在遍历所有文档表单时，console.log适用于循环中的每个实例？据我所知，我认为我需要在这里以某种方式使用AJAX来执行所有POST请求。第二个我不认为会给我带来问题的主要问题是，一旦我解决了第一个问题，我的路线就不会像我需要的那样处理一批请求

更新 根据评论中的建议，我决定尝试编写一个Ajax请求，将所有表单发布到一个单独的路由，该路由将从那里处理它。如何将表单数组传递给

数据

参数？我通过以下方式获得

未捕获范围错误：超过了最大调用堆栈大小
错误：

  $(document).ready(() => {
    $('#submit').click(function submitAllForms() {
      $.ajax({
      type: 'POST', 
      url: window.location.origin + $('h3')[0].innerText,
      data: document.forms,
      success: (data) => {
        console.log(data)
        }
      })
    })
  })

在阅读了其他一些示例之后，我尝试像这样重写原始提交脚本。而且，在这种情况下，它不会拾取
action
属性

  $(document).ready(() => {
    $('#submit').click(function submitAllForms() {
      $('form').each(() => {
        var that = $(this);
        $.post(that.attr('action'), that.serialize())
      })
    })
  })

所以，如果有人感兴趣的话，我终于想出了一个解决方案。也许不是最漂亮的，但它很管用

<script>
  $(document).ready(() => {
    $('#submit').click(function submitAllForms() {

      var counter = 0; 
      var totalForms = $('form').length;
      $('form').each((i, form) => {

        const redirectIfDone = () => {
          if (counter === totalForms) {
            alert("all forms updated successfully")
            window.location.replace(window.location.origin + '/list/' + $('h3')[0].innerText)
          }   
        }

        if (!($(form).find('textarea').val())) {
          counter++
          redirectIfDone();
          return true;
        } else {
          $.ajax({
          type: 'POST', 
          url: $(form).attr('action'),
          data: $(form).serialize(),
          success: (data) => {
            counter++;
            redirectIfDone();
          }
          })
        }
      })
    })
  })
</script>

是否确实要执行
document.forms.length
单独的表单提交？这可能不是一个很好的设计。相反，您可能应该实现一个新的路由，在一篇文章中处理来自多个表单的数据。然后，您可以使用Javascript从所有表单收集数据，并使用jQuery的
$.ajax（）
发送一篇包含所有数据的帖子。我绝对不坚持，document.forms.length只是我设法至少提交一个表单的一种方法。我理论上理解您的建议，但需要一些时间来尝试并实际实现它。@jfriend00在Ajax请求中，我如何发送所有表单。我尝试了
data:document.forms
，但它似乎不起作用。
<script>
  $(document).ready(() => {
    $('#submit').click(function submitAllForms() {

      var counter = 0; 
      var totalForms = $('form').length;
      $('form').each((i, form) => {

        const redirectIfDone = () => {
          if (counter === totalForms) {
            alert("all forms updated successfully")
            window.location.replace(window.location.origin + '/list/' + $('h3')[0].innerText)
          }   
        }

        if (!($(form).find('textarea').val())) {
          counter++
          redirectIfDone();
          return true;
        } else {
          $.ajax({
          type: 'POST', 
          url: $(form).attr('action'),
          data: $(form).serialize(),
          success: (data) => {
            counter++;
            redirectIfDone();
          }
          })
        }
      })
    })
  })
</script>

router.route('/expand-list-records-save/:listId/:recordId')
  .post((req, res) => {
      Record.findOne({
        where: {
          id: req.params.recordId
        }
      }).then(result => {
          result.update({
            embeddedMedia: req.body.embeddedmedia
          })
          res.end()
      })
    })