store form data and to print it on another page using HTML5 LocalStorge

Question

i have this Contact FORM:

HTML Code:

<form class="form-horizontal" id="contact-form" action="thanks.html" method="post">
    <fieldset>
        <div class="text-center header"><h1>צור קשר</h1></div>
        <div class="form-group">
            <div class="col-md-10 col-md-offset-1">
                <input id="fname" name="name" type="text" placeholder="שם פרטי ושם משפחה  (חובה)" class="form-control" tabindex="1" required autofocus>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-10 col-md-offset-1">
                <input id="email" name="email" type="email" placeholder="מייל: example@hotmail.com (חובה)" class="form-control" tabindex="2" required autofocus>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-10 col-md-offset-1">
                <input id="phone" name="phone" type="tel" placeholder="טלפון (חובה)" class="form-control" tabindex="3" required>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-10 col-md-offset-1">
                <textarea class="form-control" id="message" name="message" placeholder="הכנס את הודעתך לנו כאן:" rows="7" tabindex="4" required></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12 text-center">


<button name="submit" type="submit" class="btn btn-primary btn-lg" id="contact-submit">Send Email</button>

        </div>
    </div>
</fieldset>

JavaScipt Code :

(function() {

// Create input element for testing
var inputs = document.createElement('input');

// Create the supports object
var supports = {};

supports.autofocus   = 'autofocus' in inputs;
supports.required    = 'required' in inputs;
supports.placeholder = 'placeholder' in inputs;

// Fallback for autofocus attribute
if(!supports.autofocus) {

}

// Fallback for required attribute
if(!supports.required) {

}

// Fallback for placeholder attribute
if(!supports.placeholder) {

}

// Change text inside send button on submit
var send = document.getElementById('contact-submit');
if(send) {
    send.onclick = function () {
        this.innerHTML = '...Sending';
    }
}

})();

so i want to print the name and the email the user has been typed on the form on the thanks.html page

Like: thank you " USER NAME " we will get back to you soon. Your Email address is : useremail here

You couldn't find any articles about how to use localStorage on the internet?!? — Heretic Monkey, Jul 20 '17 at 13:26
@Chris as i said i want to print the info's using LocalData Storage in HTML5 https://www.w3schools.com/html/html5_webstorage.asp — Jose Luis, Jul 20 '17 at 13:26
you will easily find on internet how to store and retrieve data using LocalStorage — Mandeep Singh, Jul 20 '17 at 13:28
What exactly is your problem? read out from localStorage or write that value into your html? — Werner, Jul 20 '17 at 13:29
@Werner because im newest in html the problem is to write that value into my html code — Jose Luis, Jul 20 '17 at 13:30
@JoseLuis easy way would be create a span or div or whatever and give that tag an id. In your JS-Code write the value from your localStorage into that that. Tiny example: `document.getElementById('email').textContent = localStorage.getItem('email')` — Werner, Jul 20 '17 at 13:35

store form data and to print it on another page using HTML5 LocalStorge

0 Answers0