HTML表单数据怎么预览确认_HTML表单提交前数据预览与确认的实现方法

<form id="myForm">
  <label>姓名：<input type="text" name="name" /></label><br>
  <label>邮箱：<input type="email" name="email" /></label><br>
  <button type="button" onclick="previewData()">预览</button>
</form>

<div id="previewArea" style="display:none;">
  <h3>请确认信息</h3>
  <p><strong>姓名：</strong><span id="pName"></span></p>
  <p><strong>邮箱：</strong><span id="pEmail"></span></p>
  <button onclick="submitForm()">确认提交</button>
  <button onclick="editForm()">返回修改</button>
</div>

<script>
function previewData() {
  const name = document.querySelector('[name="name"]').value;
  const email = document.querySelector('[name="email"]').value;

  document.getElementById('pName').textContent = name;
  document.getElementById('pEmail').textContent = email;
  document.getElementById('previewArea').style.display = 'block';
  document.getElementById('myForm').style.display = 'none';
}

function submitForm() {
  // 可通过AJAX提交，或切换回表单并触发submit
  alert('表单已提交！');
  // 实际项目中可使用fetch或XMLHttpRequest发送数据
}

function editForm() {
  document.getElementById('previewArea').style.display = 'none';
  document.getElementById('myForm').style.display = 'block';
}
</script>

function submitForm() {
  const formData = new FormData(document.getElementById('myForm'));
  fetch('/submit', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    alert('提交成功！');
    document.getElementById('previewArea').style.display = 'none';
  });
}