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

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

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

1 个答案: