AJAX填充模态窗口后表单serialize无法保存数据问题

核心问题：提交按钮不在表单范围内 #

你的保存按钮.edit_drive_out位于模态框的modal-footer区域，和表单#editDriveForm是同级元素（同属modal-content的子节点），因此$button.closest('form')无法定位到正确的表单对象，最终serialize()获取的是空数据或无效数据。

其他潜在问题 #

• 部分可见输入框（如#trucksid、#trailersid）未设置name属性，jQuery的serialize()仅会收集带name属性的表单元素值，若后端需要这些字段值，会导致数据缺失。
• 你在弹出确认框前就执行了$form.serialize()，若用户在确认过程中修改表单内容，提交的仍是旧数据，应在确认通过后再序列化表单。

解决方法 #

1. 修正表单获取逻辑 #

直接通过表单ID获取元素，避免层级定位错误：

$(function() {
  $(document).on('click', '.edit_drive_out', function(e) {
    e.preventDefault();

    let $button = $(this);
    $button.blur();
    // 直接通过ID定位表单
    let $form = $('#editDriveForm');
    
    bootbox.confirm($lng.confirm_editing, function(result) {
      if (result === true) {
        // 确认后再序列化，保证获取最新表单数据
        let formData = $form.serialize();
        console.log(formData);
        $.ajax({
          type: "POST",
          url: "ajax/ajax_gates_out.php",
          dataType: "json",
          data: formData,
          success: function(response) {
            successOrErrorToastrMessage(response);

            if (response.success) {
              setTimeout(function() {
                location.reload();
              }, 2000);
            } else {
              return false; //Отменить закрытие диалогового окна
            }
          }
        });
      }
    });
  });
});

2. 补充缺失的name属性（按需） #

若后端需要trucksid和trailersid的值，给这两个输入框添加name属性：

<input type="text" class="ac_trucks" id="trucksid" name="trucksid" />
<!--  trailersid输入框同理 -->
<input type="text" class="ac_trailers" id="trailersid" name="trailersid" />

3. 验证checkbox序列化 #

jQueryserialize()会自动处理checkbox，仅勾选状态的会被序列化。可在控制台查看formData，确认勾选时是否包含lock-key=on字段，验证逻辑正确性。

验证步骤 #

1. 修改代码后，点击保存按钮，查看控制台输出的formData，确认所有必填字段及对应值是否存在。
2. 查看浏览器网络请求的Form Data，确认提交数据与控制台输出一致。
3. 若仍存在问题，检查后端接口参数名是否与表单name属性匹配，排查后端接收逻辑。

内容的提问来源于stack exchange，提问作者Lidiia