如何使用JavaScript实现HTML表单提交前在弹窗中预览数据？

第一步：修正原有HTML代码 #

原有代码存在两个问题：

• 预览按钮为submit类型，点击会触发表单提交
• 按钮外层嵌套了未闭合的a标签，会导致点击跳转
  修正后的完整表单代码如下：

<form action="" id="jobForm">
  <div class="search-form">
    <div class="form-header">
      <h4>发布新职位</h4>
    </div>

    <label for="job_title">职位名称</label>
    <input type="text" name="job_title" id="job_title" placeholder="请填写招聘职位">

    <label for="company">公司名称</label>
    <input type="text" name="company" id="company" placeholder="请填写招聘企业名称">

    <label for="experience-required">要求工作经验</label>
    <div class="input-range">
      <input type="number" min="0" max="50" name="experience-required-min" id="experience-required-min" placeholder="最低年限">
      <span>至</span>
      <input type="number" min="0" max="50" name="experience-required-max" id="experience-required-max" placeholder="最高年限">
    </div>

    <label for="salary-range">薪资范围</label>
    <div class="input-range">
      <input type="number" min="0" max="50" name="salary-range-min" id="salary-range-min" placeholder="最低年薪（万）">
      <span>至</span>
      <input type="number" min="0" max="50" name="salary-range-max" id="salary-range-max" placeholder="最高年薪（万）">
    </div>
  </div>

  <label for="job-desciption">职位描述</label>
  <textarea name="job-desciption" class="input-range" placeholder="请输入职位描述" style="height: 100px"></textarea>

  <br>
  <button class="btn btn-lg btn-warning" type="submit" name="search">发布</button>
  <button class="btn btn-lg btn-warning" type="button" id="previewBtn">预览</button>
</form>

<!-- 预览弹窗容器 -->
<div id="previewModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999;">
  <div style="background: #fff; width: 600px; margin: 50px auto; padding: 20px; border-radius: 8px;">
    <h3>职位信息预览</h3>
    <div id="previewContent"></div>
    <br>
    <button onclick="closePreview()">关闭预览</button>
  </div>
</div>

第二步：添加JavaScript实现预览逻辑 #

// 获取预览按钮元素
const previewBtn = document.getElementById('previewBtn');
// 获取弹窗元素
const previewModal = document.getElementById('previewModal');
// 获取预览内容容器
const previewContent = document.getElementById('previewContent');

// 预览按钮点击事件
previewBtn.addEventListener('click', function() {
  // 获取所有表单值
  const jobTitle = document.getElementById('job_title').value || '未填写';
  const company = document.getElementById('company').value || '未填写';
  const expMin = document.getElementById('experience-required-min').value || '不限';
  const expMax = document.getElementById('experience-required-max').value || '不限';
  const salaryMin = document.getElementById('salary-range-min').value || '面议';
  const salaryMax = document.getElementById('salary-range-max').value || '面议';
  const jobDesc = document.getElementById('job-desciption').value || '未填写';

  // 组装预览内容
  previewContent.innerHTML = `
    <p><strong>职位名称：</strong>${jobTitle}</p>
    <p><strong>公司名称：</strong>${company}</p>
    <p><strong>要求经验：</strong>${expMin} - ${expMax} 年</p>
    <p><strong>薪资范围：</strong>${salaryMin} - ${salaryMax} 万/年</p>
    <p><strong>职位描述：</strong></p>
    <p>${jobDesc.replace(/\n/g, '<br>')}</p>
  `;

  // 显示弹窗
  previewModal.style.display = 'block';
});

// 关闭预览弹窗函数
function closePreview() {
  previewModal.style.display = 'none';
}

// 点击弹窗空白处关闭
previewModal.addEventListener('click', function(e) {
  if (e.target === previewModal) {
    closePreview();
  }
});

功能说明 #

• 点击「发布」按钮会正常触发表单提交逻辑，和原有功能一致
• 点击「预览」按钮会弹出遮罩层弹窗，展示用户填写的所有表单内容，换行符会自动转换为HTML换行保证格式正确
• 点击关闭按钮或者弹窗空白区域都可以关闭预览弹窗，回到表单页面继续编辑内容

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