简体   繁体   中英

Show value of an input form from a page into another page with pure Javascript

I have two different pages. In the first one I have a form with name and email, and the second page should be the result page, and I want to show dynamically the name and email of the user from the form of the first page in the second page, and I precise, I want all this in pure javascript, not php. I tried the localStorage method, and this is what I got so far:

First page: Form page

HTML:

<label>Name:</label>
<input type="text" id="name" />
<label>Email</label>
<input type="text" id="email" />
<button  onclick="testVariable()">Submit</button> <br />

Javascript

function testVariable() {
            var strText = document.getElementById("name").value;          
            var strText1 = document.getElementById("email").value;
            var result = strText + ' ' + strText1;
            if (typeof(Storage) !== "undefined") {
    // Store
            localStorage.setItem("programX").textContent = result;
             
        }
        }

Second page: Result page

HTML:

 <p>Hi 
<span id="result"></span> thank you for subscribing to our service
</p>

Javascript:

    // Check browser support
if (typeof(Storage) !== "undefined") {
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("programX");
} else {
document.getElementById("result").innerHTML = "Browser does not support Web Storage.";
}

localStorage does not have any textContent property.

To set a localStorage

localStorage.setItem('key', 'value');

To get a localStorage value

localStorage.getItem('key');

So, what you are doing to set localStorage is wrong .

Replace

localStorage.setItem("programX").textContent = result;

with

localStorage.setItem("programX", result);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM