Ajax 如何优先处理多个表单的数据字段？

Question

我有一个页面，其中包含多个 Bootstrap 模态表单，用于提交和编辑数据。

这些是通过包含其他 PHP 页面上的表单来完成的，当站点上只有一个表单时，这可以正常工作。

如果我删除编辑表单，添加表单工作正常。我很确定这是由于 Javascript 元素造成的，但是，我无法理解它如何指定除嵌套在其下的形式之外的任何其他形式。

索引.php：

<!-- Add Modal-->

          <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

          <div class="modal-dialog" role="document">

            <div class="modal-content">

              <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLabel">Add Offence</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                  <span aria-hidden="true">&times;</span>

                </button>

              </div>

              <div class="modal-body">

                    <?php include_once('addRecordForm.php'); ?>

              </div>

            </div>

          </div>

        </div>

<!-- Edit Modal-->

  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

      <div class="modal-content">

        <div class="modal-header">

          <h5 class="modal-title" id="editModalLabel">Edit Records</h5>

          <button class="close" type="button" data-dismiss="modal" aria-label="Close">

            <span aria-hidden="true">×</span>

          </button>

        </div>

        <div class="modal-body">

            <?php include_once('editRecordForm.php'); ?>

        </div>

      </div>

    </div>

  </div>

Answer 1

您的$('form')选择器返回form页面上所有元素的集合，并且serialize不适用于集合，因此它在遇到的第一个元素中运行：#add-record-form。