I'm trying to keep the data saved on the submit.html page. The data is being stored on localstorage, i want the entered data to be in the table for always whenever i visit that page. Currently it is visible on the time of submit event only. when i go back to submit.html page with another entry, the previous data was gone.
Here's the code.
1 - index.html
<!DOCTYPE html> <html> <head> <title>User Registration</title> </head> <body> <h2>User Registration Form</h2> <form action="submit.html" onsubmit="callme()"> Name:<br> <input id="name" type="text"> <br> Adress:<br> <input id="address" type="text"> <br> Email:<br> <input id="email" type="email"> <br> Phone:<br> <input id="phone" type="number"> <br><br> <input type="submit" value="Submit"> <input type="reset" value="Reset" name="Reset"> </form> <script> function callme(){ var name = document.getElementById('name').value; localStorage.setItem('name', name); var address = document.getElementById('address').value; localStorage.setItem('address', address); var email = document.getElementById('email').value; localStorage.setItem('email', email); var phone = document.getElementById('phone').value; localStorage.setItem('phone', phone); } </script> </body> </html>2 - submit.html
<!DOCTYPE html> <html> <head> <title>Detail Page</title> </head> <body> <h2>User Detail Page</h2> <div id="result-table"> <table border="1"> <tr> <th>Name</td> <th>Address</td> <th>Email</th> <th>Phone</td> </tr> <tr> <td id="first"></td> <td id="second"></td> <td id="third"></td> <td id="fourth"></td> </tr> </table> <br> </div> <script> window.onload = function() { document.getElementById('first').innerText = localStorage.getItem('name'); document.getElementById('second').innerText = localStorage.getItem('address'); document.getElementById('third').innerText = localStorage.getItem('email'); document.getElementById('fourth').innerText = localStorage.getItem('phone'); }; </script> <form action="/index.html"> <button >Go Back</button> </form> </body> </html>asked Nov 19, 2018 at 9:54
0
I understand from your code that you overriding your existing data with the previous data, instead setting the value to a single key in local storage create and locally with the copy of previous data and add new data to it whenever you submit in that case you can have multiple forms submit and can display in the table.
var name = document.getElementById('name').value; var address = document.getElementById('address').value; var email = document.getElementById('email').value; var phone = document.getElementById('phone').value; let formData = {}; formData.name = name; formData.email = email; formData.address = address; formData.phone = phone; let formDataArry = localStorage.getItem('formDataArry') || [] formDataArry.push(formData) localStorage.setItem('formDataArry',formDataArry )
Then you can loop the array in the table to get the table with the data from local storage
answered Nov 19, 2018 at 11:01
You could store in local storage one entry containing a JSON-encoded array. Each entry in that array would need to have the four values you are interested in. So at one specific moment the single localStorage entry could have a (string) value like this:
'[ { "name": "Mary", "address": "Straight street 1", "email": "", "phone": "0123" }, { "name": "John", "address": "Highstreet 10", "email": "", "phone": "321" } ]'Here is how you could code that in JS in your existing pages:
index.html
function getData() { return JSON.parse(localStorage.getItem('data') || "[]"); } function callme() { const data = getData(); const obj = Object.assign(...["name", "address", "email", "phone"].map(prop => ({ [prop]: document.getElementById(prop).value })) ); localStorage.setItem('data', JSON.stringify(data.concat(obj))); }submit.html
function getData() { return JSON.parse(localStorage.getItem('data') || "[]"); } window.onload = function() { const tr = document.querySelector('#result-table tr:last-child'); const tbody = tr.parentNode; const data = getData(); for (let i = 1; i < data.length; i++) { tbody.appendChild(tr.cloneNode(true)); } data.forEach((row, i) => Object.keys(row).forEach(prop => tbody.rows[i+1].querySelector('.' + prop).textContent = row[prop] ); ); };
answered Nov 19, 2018 at 11:04
trincottrincot
282k31 gold badges226 silver badges262 bronze badges
var name = document.getElementById('name').value; var address = document.getElementById('address').value; var email = document.getElementById('email').value; var phone = document.getElementById('phone').value; let formData = {}; formData.name = name; formData.email = email; formData.address = address; formData.phone = phone; let formDataArry = localStorage.getItem('formDataArry') || [] formDataArry.push(formData) localStorage.setItem('formDataArry',formDataArry )
answered Jun 13 at 17:43
1