如何实现HTML表单向导刷新后保持当前步骤？

Hey there! Let's get your registration wizard sorted out—keeping the current step after refresh is totally doable, and we'll also cover expanding the steps and saving to a database.

Core Fix: Persist Current Step with localStorage #

The main issue is that currentTab lives in browser memory, which gets wiped on refresh. We'll use localStorage (persists across sessions) or sessionStorage (only lasts until browser closes) to keep track of the active step. Here's how to modify your code:

Key Changes to the Script: #

• Initialize currentTab by pulling from localStorage instead of hardcoding 0
• Save the updated currentTab to storage every time the user navigates steps
• Clear storage when the form submits so users don't land on the final step if they come back

Expanding to 7-8 Steps #

Just duplicate your existing .tab divs with new content, and add matching <span class="step"></span> elements in the step indicator bar.

Submitting to Database #

Instead of a plain form submit, we'll use AJAX to send data to your backend (PHP example included) without reloading the page, but we'll also keep the standard submit as a fallback.

Full Modified Code #

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* { box-sizing: border-box; }
body { background-color: #f1f1f1; }
#regForm { background-color: #ffffff; margin: 100px auto; font-family: Raleway; padding: 40px; width: 70%; min-width: 300px; }
h1 { text-align: center; }
input { padding: 10px; width: 100%; font-size: 17px; font-family: Raleway; border: 1px solid #aaaaaa; }
input.invalid { background-color: #ffdddd; }
.tab { display: none; }
button { background-color: #4CAF50; color: #ffffff; border: none; padding: 10px 20px; font-size: 17px; font-family: Raleway; cursor: pointer; }
button:hover { opacity: 0.8; }
#prevBtn { background-color: #bbbbbb; }
.step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; }
.step.active { opacity: 1; }
.step.finish { background-color: #4CAF50; }
</style>
<body>
<form id="regForm">
<h1>Register:</h1>
<!-- Step 1 -->
<div class="tab">Name:
<p><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
<p><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
</div>
<!-- Step 2 -->
<div class="tab">Contact Info:
<p><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
<p><input placeholder="Phone..." oninput="this.className = ''" name="phone"></p>
</div>
<!-- Step 3 -->
<div class="tab">Birthday:
<p><input placeholder="dd" oninput="this.className = ''" name="dd"></p>
<p><input placeholder="mm" oninput="this.className = ''" name="mm"></p>
<p><input placeholder="yyyy" oninput="this.className = ''" name="yyyy"></p>
</div>
<!-- Step 4 -->
<div class="tab">Login Info:
<p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
<p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
</div>
<!-- Step 5 (New) -->
<div class="tab">Address:
<p><input placeholder="Street address..." oninput="this.className = ''" name="address"></p>
<p><input placeholder="City..." oninput="this.className = ''" name="city"></p>
</div>
<!-- Step 6 (New) -->
<div class="tab">Preferences:
<p><input type="checkbox" name="newsletter" value="yes"> Subscribe to newsletter</p>
<p><select name="notification" oninput="this.className = ''">
  <option value="">Choose notification type</option>
  <option value="email">Email</option>
  <option value="sms">SMS</option>
</select></p>
</div>
<!-- Step 7 (New) -->
<div class="tab">Final Review:
<p>Please review your information before submitting.</p>
<!-- Optional: Add summary of entered data here -->
</div>

<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Step indicators (7 steps total) -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>

<script>
// Initialize currentTab from localStorage, default to 0 if no value exists
var currentTab = parseInt(localStorage.getItem('formCurrentTab')) || 0; 
showTab(currentTab);

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  
  fixStepIndicator(n);
}

function nextPrev(n) {
  var x = document.getElementsByClassName("tab");
  
  if (n == 1 && !validateForm()) return false;
  
  x[currentTab].style.display = "none";
  currentTab = currentTab + n;
  
  // Save current tab to localStorage whenever we navigate
  localStorage.setItem('formCurrentTab', currentTab);
  
  if (currentTab >= x.length) {
    // Submit form via AJAX instead of page reload
    submitFormData();
    // Clear localStorage after submission
    localStorage.removeItem('formCurrentTab');
    return false;
  }
  
  showTab(currentTab);
}

function validateForm() {
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].querySelectorAll("input, select"); // Include select elements for validation
  
  for (i = 0; i < y.length; i++) {
    if (y[i].value.trim() == "") {
      y[i].className += " invalid";
      valid = false;
    } else {
      // Remove invalid class if field is filled
      y[i].className = y[i].className.replace(" invalid", "");
    }
  }
  
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  
  return valid;
}

function fixStepIndicator(n) {
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  x[n].className += " active";
}

// AJAX function to submit data to backend
function submitFormData() {
  var form = document.getElementById('regForm');
  var formData = new FormData(form);
  
  fetch('submit-registration.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    // Show success message or redirect
    alert('Registration successful!');
    // Reset form if needed
    form.reset();
    currentTab = 0;
    showTab(currentTab);
  })
  .catch(error => {
    console.error('Error:', error);
    alert('There was an error submitting your registration.');
  });
}
</script>
</body>
</html>

Backend PHP Example (submit-registration.php) #

This is a basic example to insert data into a MySQL database—adjust the table name, columns, and database credentials to match your setup:

<?php
// Database configuration
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// Get form data
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$dd = $_POST['dd'];
$mm = $_POST['mm'];
$yyyy = $_POST['yyyy'];
$uname = $_POST['uname'];
$pword = password_hash($_POST['pword'], PASSWORD_DEFAULT); // Hash password!
$address = $_POST['address'];
$city = $_POST['city'];
$newsletter = isset($_POST['newsletter']) ? 1 : 0;
$notification = $_POST['notification'];

// Prepare and bind
$stmt = $conn->prepare("INSERT INTO users (fname, lname, email, phone, dd, mm, yyyy, uname, pword, address, city, newsletter, notification) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
$stmt->bind_param("sssssssssssis", $fname, $lname, $email, $phone, $dd, $mm, $yyyy, $uname, $pword, $address, $city, $newsletter, $notification);

// Execute query
if ($stmt->execute()) {
  echo "New record created successfully";
} else {
  echo "Error: " . $stmt->error;
}

// Close connections
$stmt->close();
$conn->close();
?>

Notes: #

• Storage Choice: Use sessionStorage instead of localStorage if you want the step to reset when the user closes the browser—just replace localStorage with sessionStorage everywhere in the script.
• Form Validation: I updated the validation to include <select> elements since we added a dropdown in step 6.
• Password Security: Always hash passwords before storing them in the database—never store plain text!
• Summary Step: For the final review step, you can add JavaScript to pull all entered values and display them as a summary for the user to check before submitting.

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