javascript - 一键提交多个表单

Question

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

在 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 请求。我认为目前不会给我带来问题的第二件主要事情是，一旦我解决了第一个问题，我的路线就不会像我需要的那样处理一批请求。

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

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

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