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。