I am working with javascript
when I submit the form I store the data in a table but the table data is also clear
index.html
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick='onFormSubmit()'/>
</form>
<br/> <br/>
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
index.js
function onFormSubmit() {
document.getElementById('fname').value;
document.getElementById('lname').value;
document.getElementById('location').value;
readFormData();
}
function readFormData() {
var data = {};
data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;
insertnewrecord(data);
}
function insertnewrecord(data) {
document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;
resetform();
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
I am working with html with javascript
when I submit the form then not able to see the data in table I put debug and I can see the data is store in table but then tabale data is clear.
Here is my solution, you need to insert a row each time and then instead of doing a submit, just clear the form instead!
function onFormSubmit() {
insertRow();
}
function insertRow() {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var location = document.getElementById('location').value;
var table = document.getElementById("myTable");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(-1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = location;
resetform();
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='button' value='submit' onclick='onFormSubmit()' />
</form>
<br/> <br/>
<table id="myTable">
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
</tbody>
</table>you just need to prevent form to refresh page then you just need remove function that clear form Cell index.html
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick="event.preventDefault(); onFormSubmit()" /><!-- <<<<<<<<<<<<<<<<< -->
</form>
<br /> <br />
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
index.js
function onFormSubmit() {
document.getElementById('fname').value;
document.getElementById('lname').value;
document.getElementById('location').value;
readFormData();
}
function readFormData() {
var data = {};
data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;
insertnewrecord(data);
}
function insertnewrecord() {
document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;
// resetform(); <<<<<<<<<<<<<<<<<
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
You should declare the data object globally inside the js script. Also, use event.preventDefault() inside custom button click function.
Also, I changed the insertnewrecord() function to handle multiple insert operations in the table.
Check following code:
var data = {};
function onFormSubmit(e) {
readFormData();
e.preventDefault();
}
function readFormData() {
data.fname = document.getElementById("fname").value;
data.lname = document.getElementById("lname").value;
data.location = document.getElementById("location").value;
insertnewrecord(data);
}
function insertnewrecord(data) {
var table = document.getElementById("show-data");
table.innerHTML += `<tr> <td>${data.fname}</td> <td>${data.lname}</td> <td>${data.location}</td> </tr>`;
resetform();
}
function resetform() {
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("location").value = "";
}<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick='onFormSubmit(event)' />
</form>
<br/> <br/>
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody id="show-data">
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>