如何将contact.html表单的客户姓名显示到success.html页面

需求说明 #

我有一个包含contact.html和success.html的网站，用户在contact.html的表单中填写信息并提交后，会跳转至success.html页面。需要将用户输入的姓名，显示到success.html页面h1标签内id为emptyspan的空span中。

现有代码 #

contact.html 表单代码 #

<form method="post" action="#">
                <fieldset>
                    <div class="contact-form-group">
                        <div class="contact-form-subgroup">
                            <label class="label" for="Name">Name</label>
                            <input class="input" id="username" name="name" type="text" required>
                            <label class="label" for="email">Email</label>
                            <input class="input" name="email" type="email" required>
                            <label class="label" for="Phone">Phone</label>
                            <input class="input phone-input" name="tel" type="tel">
                        </div>
                        <div class="contact-form-subgroup">
                            <label for="budget" class="label">Expected Budget</label>
                            <input type="number" name="number" min="0" max="15000" placeholder="$" class="input">
                            <label for="time" class="label">Expected Start Date</label>
                            <select class="input" name="date" id="">
                                <option value="" disabled selected hidden>Choose</option>
                                <option value="Immediately">Immediately</option>
                                <option value="Within 2 weeks">Within a Week</option>
                                <option value="2 weeks">2 Weeks</option>
                                <option value="a month">A Month</option>
                            </select>
                            <label for="field" class="label">How did you find us?</label>
                            <select class="input" name="find" id="">
                                <option value="" disabled selected hidden>Choose</option>
                                <option value="recommendation">Recommendation</option>
                                <option value="google search">Google Search</option>
                                <option value="advertisement">Advertisement</option>
                                <option value="instagram">Instagram</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="contact-form-subgroup">
                            <label for="message" class="label">Message</label>
                            <textarea class="input message-input" name="message" cols="30" rows="6"></textarea>
                        </div>
                        <div class="contact-form-subgroup submittion-div">
                            <input class="form-submit-btn btn" id="submitbutton" type="submit" value="Submit">
                        </div>

                        <!-- form submission settings -->
                        <input type="hidden" name="_captcha" value="false">
                        <input type="hidden" name="_subject" value="Contact - New submission | truenorthweb.ca">
                        <input type="hidden" name="_template" value="table">
                        <input type="hidden" name="_blacklist" value="bund, lun, fudi, fuddu, chitdu, thukal, fuck, ass">
                        <input class="hidden-input" type="text" name="_honey" style="display:none">
                        <input type="hidden" name="_next" value="https://truenorthweb.ca/success.html">
                    </div>
                </fieldset>
            </form>

success.html 页面代码 #

<section id="success">
        <div class="container flex-container success-container">
            <div class="content-container">
                <img class="checkmark" src="https://img.icons8.com/3d-plastilina/138/null/checked--v4.png"/>
                <h1>Thank you, <span id="emptyspan"></span> !</h1>
                <p>We will get back to you as soon as possible.</p>
                <p></p>
            </div>
        </div>
    </section>

现有不完整JavaScript脚本 #

var submit = document.getElementById('submitbutton')
var formName = document.getElementById('username')
var name = document.getElementById('emptyspan')


function displayName() {
    var username = document.getElementById('username').value;
    document.getElementById('emptyspan').innerHTML = username;
}

解决方案 #

由于表单提交后会跳转到新页面，原有脚本无法跨页面操作DOM元素，需要通过跨页面数据传递实现需求，以下提供两种可行方案：

方案一：使用LocalStorage存储用户名 #

这种方式不会在URL中暴露用户姓名，更隐蔽。

1. 在contact.html中添加以下脚本（放在表单代码之后）：

document.getElementById('submitbutton').addEventListener('click', function() {
    const username = document.getElementById('username').value;
    // 将用户名存入本地存储
    localStorage.setItem('submittedUsername', username);
});

2. 在success.html中添加以下脚本（放在页面末尾或<head>的DOMContentLoaded事件中）：

window.addEventListener('load', function() {
    const username = localStorage.getItem('submittedUsername');
    if (username) {
        document.getElementById('emptyspan').textContent = username;
        // 可选：读取后清除存储，避免页面刷新仍显示旧数据
        localStorage.removeItem('submittedUsername');
    }
});

方案二：通过URL参数传递用户名 #

这种方式实现简单，用户姓名会出现在URL中，适合对隐私要求不高的场景。

1. 在contact.html中添加以下脚本：

document.querySelector('form').addEventListener('submit', function(e) {
    const username = document.getElementById('username').value;
    const nextInput = document.querySelector('input[name="_next"]');
    // 编码用户名并附加到跳转URL中
    nextInput.value = `https://truenorthweb.ca/success.html?name=${encodeURIComponent(username)}`;
});

2. 在success.html中添加以下脚本：

window.addEventListener('load', function() {
    // 解析URL中的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const username = urlParams.get('name');
    if (username) {
        document.getElementById('emptyspan').textContent = username;
    }
});

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