Mixing
How to display data fetched from localstorage to a simple HTML page
up vote
1
down vote
favorite
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>
<h1>User Registration Form</h1>
<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>
<h1>User Detail Page</h1>
<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>
javascript html forms
asked 22 hours ago
Mahesh Mindrops
84
add a comment |
up vote
1
down vote
favorite
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>
<h1>User Registration Form</h1>
<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>
<h1>User Detail Page</h1>
<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>
javascript html forms
asked 22 hours ago
Mahesh Mindrops
84
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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>
<h1>User Registration Form</h1>
<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>
<h1>User Detail Page</h1>
<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>
javascript html forms
asked 22 hours ago
Mahesh Mindrops
84
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>
<h1>User Registration Form</h1>
<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>
<h1>User Detail Page</h1>
<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>
javascript html forms
javascript html forms
asked 22 hours ago
Mahesh Mindrops
84
asked 22 hours ago
Mahesh Mindrops
84
asked 22 hours ago
Mahesh Mindrops
84
asked 22 hours ago
Mahesh Mindrops
84
asked 22 hours ago
Mahesh Mindrops
84
84
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
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 21 hours ago
Arulmozhi Manikandan
1365
New contributor
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
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": "mary@abc.com", "phone": "0123" },
{ "name": "John", "address": "Highstreet 10", "email": "john@yho.com", "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 21 hours ago
trincot
113k1477109
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
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 21 hours ago
Arulmozhi Manikandan
1365
New contributor
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
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 21 hours ago
Arulmozhi Manikandan
1365
New contributor
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
up vote
1
down vote
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 21 hours ago
Arulmozhi Manikandan
1365
New contributor
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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
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 )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 21 hours ago
Arulmozhi Manikandan
1365
New contributor
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 21 hours ago
Arulmozhi Manikandan
1365
New contributor
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 21 hours ago
Arulmozhi Manikandan
1365
answered 21 hours ago
Arulmozhi Manikandan
1365
1365
New contributor
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Arulmozhi Manikandan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
up vote
0
down vote
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": "mary@abc.com", "phone": "0123" },
{ "name": "John", "address": "Highstreet 10", "email": "john@yho.com", "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 21 hours ago
trincot
113k1477109
add a comment |
up vote
0
down vote
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": "mary@abc.com", "phone": "0123" },
{ "name": "John", "address": "Highstreet 10", "email": "john@yho.com", "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 21 hours ago
trincot
113k1477109
add a comment |
up vote
0
down vote
up vote
0
down vote
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": "mary@abc.com", "phone": "0123" },
{ "name": "John", "address": "Highstreet 10", "email": "john@yho.com", "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 21 hours ago
trincot
113k1477109
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": "mary@abc.com", "phone": "0123" },
{ "name": "John", "address": "Highstreet 10", "email": "john@yho.com", "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 21 hours ago
trincot
113k1477109
answered 21 hours ago
trincot
113k1477109
answered 21 hours ago
trincot
113k1477109
answered 21 hours ago
trincot
113k1477109
113k1477109
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372096%2fhow-to-display-data-fetched-from-localstorage-to-a-simple-html-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
