一键提交多份表格答案

【问题标题】：Submitting multiple forms with one button一键提交多份表格
【发布时间】：2018-09-12 03:21:51
【问题描述】：

我查看了关于该主题的所有已存在的主题，但无法为我的案例提出解决方案。

我在 Handlebars 的帮助下渲染了多个表单，如下所示：

<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>

我的 Node.js + Express.js 路由看起来像这样

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

      }).then(() => {
          console.log("sending list to view")
          sendListDataToView({ params: {id: req.params.listId} }, res, 'view-list')

        })
    })

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

更新根据 cmets 的建议，我决定尝试编写一个 Ajax 请求，将所有表单发布到一个单独的路由，该路由将从那里处理它。如何将表单数组传递给data 参数？我这样得到Uncaught RangeError: Maximum call stack size exceeded 错误：

  $(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())
      })
    })
  })

【问题讨论】：

您真的要执行document.forms.length 单独的表单提交吗？这可能不是一个很好的设计。相反，您可能应该实现一个新路由，在一个 POST 中处理来自多个表单的数据。然后，您可以使用 Javascript 从所有表单中收集数据，并使用 jQuery 的$.ajax() 发送一个包含所有数据的 POST。
我绝对不坚持这一点，document.forms.length 只是我设法至少提交一份表单的一种方式。我从理论上理解您的建议，但需要一些时间来尝试并实际实施。
@jfriend00 在这样的 Ajax 请求中，我如何发送所有表单。我已经尝试过data: document.forms，但它似乎不起作用。

标签： javascript jquery node.js forms

【解决方案1】：

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

<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()
      })
    })

【讨论】：