I am trying to store user input as JSON in local storage with the help of html forms and then trying to display them in a html table.
I can see the values getting stored in the local storage with the inspect element tool, but something is going wrong and my values are not showing on the table.
I tried doing it in different ways too but nothing worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Putting User Input into JS Objects</title>
<style>
.formBox{
padding: 0.5rem 2rem;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<form>
<div >
<label for="fname">First Name:</label>
<input type="text" id="fname" placeholder="FirstName"/>
</div>
<div >
<label for="lname">Last Name:</label>
<input type="text" id="lname" placeholder="LastName"/>
</div>
<div >
<label for="gender">Gender:</label>
<select name="gender" id="gender" >
<option value="Male" selected disabled>Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="prefer not to say">Prefer Not to Say</option>
</select>
</div>
<div >
<label for="age">Age</label>
<input type="number" id="age" min="1" placeholder="Age"/>
</div>
<div >
<label for="specialization">Specialization:</label>
<select name="specialization" id="specialization" >
<option value="Not Selected" selected disabled>Specialization</option>
<option value="Database Programmer">Database Programmer</option>
<option value="Web Developer">Web Developer</option>
<option value="Software Programmer">Software Programmer</option>
<option value="Network Engineer">Network Engineer</option>
</select>
</div>
<div >
<label for="exp">Experience</label>
<input type="number" id="exp" min="1" placeholder="Experience"/>
</div>
<div >
<label for="achi">Achievements</label>
<input type="text" id="achi" placeholder="Achievements"/>
</div>
<div >
<button onclick="Submit()">Add</button>
</div>
<div id="msg">
<pre></pre>
</div>
</form>
<table id="table">
<tr>
<th>F. Name:</th>
<th>L. Name:</th>
<th>Gender:</th>
<th>Age:</th>
<th>Specialization:</th>
<th>Experience:</th>
<th>Achievements:</th>
</tr>
<tr id ="tbl_data">
</tr>
<tr>
</table>
<script>
var taskData = [];
var i = null;
function Submit() {
if (taskData.length > 0) {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;
var specialization = document.getElementById('specialization').value;
var experience = document.getElementById('exp').value;
var achievement = document.getElementById('achi').value;
const obj = { "fname": fname, "lname": lname, "gender": gender, "age": age, "specialization": specialization, "exp": experience, "achi": achievement }
var stored = JSON.parse(localStorage.getItem("task"));
stored.push(obj);
}
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;
var specialization = document.getElementById('specialization').value;
var experience = document.getElementById('exp').value;
var achievement = document.getElementById('achi').value;
const obj = { "fname": fname, "lname": lname, "gender": gender, "age": age, "specialization": specialization, "exp": experience, "achi": achievement }
taskData.push(obj);
localStorage.setItem("task", JSON.stringify(taskData));
document.getElementById("result").innerHTML = localStorage.getItem("task");
if (i == null) {
i = 0;
}
for (i = i; i < taskData.length; i) {
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = i 1;
row.insertCell(1).innerHTML = taskData[i].fname;
row.insertCell(2).innerHTML = taskData[i].lname;
row.insertCell(3).innerHTML = taskData[i].gender;
row.insertCell(4).innerHTML = taskData[i].age;
row.insertCell(5).innerHTML = taskData[i].specialization;
row.insertCell(6).innerHTML = taskData[i].exe;
row.insertCell(7).innerHTML = taskData[i].achi;
i = i;
}
}
</script>
</body>
</html>CodePudding user response：
I am unsure of your exact error, but you can easily set and display an item with functions from a user's input here is the code -
function saveData() {
var userinput = prompt("Enter anything")
localStorage.setItem("userinput", JSON.stringify(userinput));
}
function loadData() {
var stored = localStorage.getItem('userinput');
if (stored == null) {
document.write("No data has been saved yet")
} else {
document.write('Saved Object: ' JSON.parse(stored));
}
}
CodePudding user response：
First: You don't have an element with id "result" in HTML... so nothing is displayed. Create <div id="result"></div> anywhere in your HTML.
Second: You calling document.getElementById("result").innerHTML = localStorage.getItem("task"); inside function Submit(). Move that above or below function.
Now you have data displayed...