How to pre-fill form with data/value from previous page

Question

Trying to figure out how to pass the data with Local / Session storage.

Here's my form

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span></button>
    <h4 id="labelConvert" class="modal-title">Like what you see? See even more!</h4>
</div>
<div class="modal-body"> <img class="img-responsive img-spacer margin-bottom-30" src="assets/img/features/cleardent/kiosk.png" alt="iPad Kiosk helps with gathering patient in-take">
    <p>Book a demo and one of our friendly consultants can walk you through all the benefits your practice can expect when you choose to implement Kiosk at your practice. Plus, we have many other amazing features that we would be happy to show you as well!</p>
    <!-- Demo Menu-->
    <form action="#" method="post" id="demo-formPopup" name="demo-formPopup" class="sky-form" onSubmit="return false;">
        <fieldset>
            <label class="input"><i class="icon-prepend fa fa-user"></i>
                <input type="text" name="demo-name" id="demo-namePopup" required placeholder="Your name">
            </label>
            <label class="input"><i class="icon-prepend fa fa-envelope"></i>
                <input type="email" name="demo-email" id="demo-emailPopup" required placeholder="Your email">
            </label>
            <label class="input"><i class="icon-prepend fa fa-phone"></i>
                <input type="tel" name="demo-phone" id="demo-phonePopup" required placeholder="Your phone number">
            </label>
            <label class="input"><i class="icon-prepend fa fa-commenting"></i>
                <input type="text" name="demo-notes" placeholder="Additional notes to us">
            </label>
            <input class="hidden" type="text" id="n7Q2326JYZ334s58FWq3TrPopup" name="n7Q2326JYZ334s58FWq3Tr" value="bg62U79DPNCTbBvpZHueZG" tabindex="-1" aria-hidden="true">
            <input class="hidden" type="text" id="campaignPopup" name="campaign" value="" tabindex="-1" aria-hidden="true">
        </fieldset>
        <footer>
            <div class="form-buttons">
                <button id="btnReqDemoPopup" class="btn-u pull-left"><i class="fa fa-paper-plane fa-fw"></i> Book</button>
                <button type="button" class="btn-u btn-brd pull-right" data-dismiss="modal"><i class="fa fa-times fa-fw"></i> Close</button>
            </div>
            <div class="form-sub-msg">
                <p>Sending a demo request, please wait&hellip;</p>
            </div>
        </footer>
    </form>
</div>

I want to pass what user types in "email" and pass it to the "subscribe" form below, which is on the next webpage. I want it to happen so they have pre-filled email address from what they typed in previous page.

<div id="mc_embed_signup" class="row margin-bottom-20">
    <form action="//cleardent.us2.list-manage.com/subscribe/post?u=c94a01df02408fee7e80ba656&amp;id=3d0b9b204d&amp;MERGE3=Web" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="form-inline" target="_blank">
        <div class="col-xs-12">
            <div class="input-group">
                <label class="sr-only" for="mce-EMAIL">Email address</label>
                <span class="input-group-addon colour-cleardent"><i class="fa fa-newspaper-o fa-fw"></i></span>
                <input type="email" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email address" required>
                <span class="input-group-btn">
                    <button type="submit" id="mc-embedded-subscribe" class="btn-u form-control">Subscribe</button>
                </span> 
            </div>
        </div>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true">
            <input type="text" name="b_c94a01df02408fee7e80ba656_3d0b9b204d" tabindex="-1" value="">
        </div>
    </form>
</div>

How should the local storage work? I am very new to coding and this is such a heavy task for me. Can someone please help me understand this?

Thank you,

Jason

Answer 1

You can access localStorage via window.localStorage . If you're already handling the form submission with Javascript, in that code I would add:

var storage = window.localStorage;
var userEmail = document.getElementById('demo-emailPopup').value;
storage.setItem('email', userEmail);

and when your second page loads:

var storage = window.localStorage;
var userEmail = storage.getItem('email');
document.getElementById('mce-EMAIL').value = userEmail;

Answer 2

This is the functions to save data with localStorage:

localStorage.setItem('key', 'value');
localStorage.getItem('key'); //return: 'value'

Check on jsfiddle

Use 'sessionStorage' instead 'localStorage' for temporal data