How to display clients name input from form into another html success page after submission

Question

I have a website with contact.html page and success.html page, when a client fills a form contact form pagein contact.html and submits it takes them to success.html where they see this page:enter image description here and here are the codes: 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>

I want to add the client's name input from the form into the empty span in h1 in success.html (I have marked the place in the image).

I have an incomplete js script which looks like this

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;
}

Answer 1

Try recording the user name in sessionStorage when the form is submitted within contact.html, using code similar to

document.querySelector("form").addEventListener("submit", event=> {
    sessionStorage.setItem("username", event.target.name.value);
});

Optionally validate the code above by temporarily adding another event listener after it to log the name on the console. You will need to remove this second listener to allow the form to be submitted:

 // confirm setting without submission
   document.querySelector("form").addEventListener("submit", event=> {
   console.log("username: ", sessionStorage.getItem("username"));
   event.preventDefault();
});

In success.html retrieve the username from session storage and insert it in the span element:

document.getElementById('emptyspan').textContent =
   sessionStorage.getItem("username");

---

See a note I added in question comment with MDN links for local and session support, and a previous question about what they do.