javascript - Ajax如何对多种表单的数据字段进行优先级排序？

Question

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

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

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

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

自定义.js

// Delete Records
$(function() {
    $( ".delbtn" ).click(function(){
        var itemID = $(this).attr("id");
        console.log(itemID);
        $.ajax({
            url:"delete.php", //the page containing php script
            data: { id: itemID}, // itemID passed as id
            type: "POST", //request type
            success:function(result){
                //alert(result);
                location.reload();
            },
            error: function() {
                alert('Error occured');
            }
        });
    });
});

$(function() {
    //#add-record-form grabs the form id
    $('#edit-record-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: 'editRecord.php',
            method:'post',
            data: $(this).serialize(),
            dataType: "text",
            success: function(msg) {
                //alert('Records Edited!');
                location.reload();
            }               
        });
    });
});


//Add Records 
$(function() {
    //#add-record-form grabs the form id
    $('#add-record-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: 'addRecord.php',
            method:'post',
            data: $(this).serialize(),
            dataType: "text",
            success: function(msg) {
                //alert('Records Added!');
                location.reload();
            }               
        });
    });
});

Answer 1

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