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

So when you submit contact html form your page refreshes and you land to success.html page correct ? If yes than data is lost due to page refresh so what you can do is save the name in localStorage and fetch it from localStorage and show data. If page is not refreshing you can just save name in global variable and access name from global variable. Hope I was helpful. — prograk, Apr 25 '23 at 05:28
To get data submitted from one HTML page to another HTML page you have to use some backend technology. — Pragnesh Chauhan, Apr 25 '23 at 05:32
It's probably better to use [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) instead of [`localStrorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) if you are saving the name in **contact.html** for use by **success.html** in the same tab. See [HTML5 Local storage vs. Session storage](https://stackoverflow.com/q/5523140/5217142) for more info about the difference. — traktor, Apr 25 '23 at 06:17

score 0 · Answer 1 · answered Apr 25 '23 at 12:58

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.

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

1 Answers1