使用jQuery实现模态框表单数据预览遇formData未定义问题求助

嘿，我一眼就看出问题所在了——那个formData is not defined错误是变量作用域导致的！咱们一步步修复它：

错误原因 #

你在$('#form1').on('submit')的回调函数里声明了var formData = $(this).serialize();，这个变量是局部变量，只能在那个submit回调内部访问。而你在prvwModal的shown.bs.modal事件里直接调用formData，这个函数根本拿不到这个局部变量，所以就报错了。

另外，你的提交按钮同时加了data-dismiss="modal"和data-toggle="modal"，这可能会让Bootstrap的模态框切换逻辑混乱，最好手动控制模态框的显示/隐藏。

修复方案 #

这里提供两种可靠的解决思路，选哪种都可以：

方案1：提升变量作用域 #

把formData声明在外部作用域，让两个事件回调都能访问到：

修改后的完整代码

HTML部分（调整按钮属性+补全input的name属性）

<!-- Modal -->
<div class="modal fade" id="xModal" tabindex="-1" role="dialog" aria-labelledby="xModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="xModalLabel"><em class="fa fa-spinner fa-spin"></em> form1</h4>
      </div>
      <div class="modal-body">
        <form id="form1">
          <!-- 注意：serialize()需要input有name属性才能生效 -->
          <input type="text" class="form-control" id="fname" name="fname" value="hello" />
          <input type="text" class="form-control" id="lname" name="lname" value="kitty" />
          <!-- 移除自动模态框属性，改用JS手动控制 -->
          <button type="submit" class="btn btn-primary">Preview</button>
        </form>
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>
<!-- preview Modal -->
<div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="prvwModalLabel"><em class="fa fa-spinner fa-spin"></em>prvw loading...</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

jQuery部分

// 声明全局作用域的变量存储表单数据
let formData;

// 显示xModal
$('#xModal').modal('show');

$('#xModal').on('shown.bs.modal', function() {
  $('#form1').on('submit', function(e) {
    e.preventDefault();
    console.log('xModal submitted');
    // 获取表单数据
    formData = $(this).serialize();
    // 手动关闭xModal，再打开prvwModal
    $('#xModal').modal('hide');
    $('#prvwModal').modal('show');
  });
  console.log('xModal loaded');
});

$('#prvwModal').on('shown.bs.modal', function() {
  console.log('prvwModal loaded' + formData);
  // 更新预览模态框的内容
  $(this).find('.modal-body').text(formData);
  $(this).find('.modal-title').text('#form1 Preview');
})

方案2：用元素的data属性存储数据 #

如果不想用全局变量，可以把表单数据存在prvwModal元素的data属性里，更优雅：

修改jQuery的submit回调部分：

$('#form1').on('submit', function(e) {
  e.preventDefault();
  console.log('xModal submitted');
  const formData = $(this).serialize();
  // 把数据存在prvwModal的data属性中
  $('#prvwModal').data('formData', formData);
  $('#xModal').modal('hide');
  $('#prvwModal').modal('show');
});

然后在prvwModal的shown事件里读取：

$('#prvwModal').on('shown.bs.modal', function() {
  const formData = $(this).data('formData');
  console.log('prvwModal loaded' + formData);
  $(this).find('.modal-body').text(formData);
  $(this).find('.modal-title').text('#form1 Preview');
})

额外优化：更友好的预览格式 #

如果觉得serialize()的字符串（比如fname=hello&lname=kitty）不够直观，可以把表单数据解析成对象，格式化后展示：

// 在submit回调里替换serialize()的部分
const formObj = $(this).serializeArray().reduce((obj, item) => {
  obj[item.name] = item.value;
  return obj;
}, {});
const formData = JSON.stringify(formObj, null, 2);

这样预览模态框里会显示格式化的JSON，可读性更强：

{
  "fname": "hello",
  "lname": "kitty"
}

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