添加错误标签后表单未提交且无错误输出，表单预览功能遇阻

Hey there, let's break down what's going wrong with your form submission after preview—this is a super common pitfall, so let's walk through the fixes step by step.

The first red flag here is that your print statements aren't showing input data—this means the data isn't even making it to the preview page in the first place. Let's fix how you pass data from the original form to preview.html:

If you were relying on a regular form submit to jump to preview.html, that won't work for POST data (it doesn't persist across page loads). Instead, use sessionStorage to temporarily store the form data before redirecting:

// On your original form page
document.getElementById("order-form").addEventListener("submit", function(e) {
  e.preventDefault(); // Stop default form submit
  // Collect all form data into an object
  const formData = new FormData(this);
  const orderData = Object.fromEntries(formData);
  // Store it in sessionStorage (only persists until browser closes)
  sessionStorage.setItem("orderData", JSON.stringify(orderData));
  // Now jump to preview page
  window.location.href = "preview.html";
});

Then in preview.html, load the data and populate both your preview display AND hidden form fields (so you can submit it later):

<!-- preview.html -->
<div class="preview-container">
  <h2>Order Preview</h2>
  <p>Name: <span id="preview-name"></span></p>
  <p>Email: <span id="preview-email"></span></p>
  <!-- Add all your preview fields here -->
</div>

<!-- Hidden form to submit data to your backend -->
<form id="save-form" action="your-save-endpoint.php" method="POST">
  <input type="hidden" name="name" id="hidden-name">
  <input type="hidden" name="email" id="hidden-email">
  <!-- Add hidden fields for all your form data -->
  <button type="submit">Save Order</button>
</form>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Fetch the stored data
  const orderData = JSON.parse(sessionStorage.getItem("orderData"));
  
  if (!orderData) {
    console.error("No order data found! Redirecting back to form...");
    window.location.href = "your-form-page.html";
    return;
  }

  // Populate preview display
  document.getElementById("preview-name").textContent = orderData.name;
  document.getElementById("preview-email").textContent = orderData.email;
  
  // Populate hidden form fields for submission
  document.getElementById("hidden-name").value = orderData.name;
  document.getElementById("hidden-email").value = orderData.email;
  
  // Now your print statement should work!
  console.log("Loaded order data:", orderData);
});
</script>

If the save button does nothing, 9 times out of 10 you've accidentally blocked the default form submit without adding custom submission logic:

• Check if you have a submit event listener on the save form with e.preventDefault() but no follow-up code to send the data to your backend. If you want to use AJAX for submission (to avoid page reload), add this:

document.getElementById("save-form").addEventListener("submit", function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  
  fetch(this.action, {
    method: this.method,
    body: formData
  })
  .then(response => {
    if (!response.ok) throw new Error("Server error");
    return response.json();
  })
  .then(data => {
    console.log("Order saved successfully!", data);
    // Add a success message for the user here
    sessionStorage.removeItem("orderData"); // Clean up stored data
  })
  .catch(error => {
    console.error("Save failed:", error);
    // Show an error message to the user—this is why you had no feedback before!
    alert("Failed to save order. Please try again.");
  });
});

• If you prefer a regular form submit (page reload), just remove any e.preventDefault() calls from the save form's event listener, and double-check that the action attribute points to your actual backend endpoint (e.g., save-order.php).

• Open your browser's DevTools > Application tab > Session Storage to confirm orderData exists with the correct values when on preview.html.
• Verify all hidden form fields in preview.html have the correct name attributes (matching what your backend expects to receive).
• Check your backend logs or add error reporting to your server script (e.g., in PHP add error_reporting(E_ALL); ini_set('display_errors', 1); at the top) to catch silent server-side errors.

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