提交表格后表格數據清晰
[英]table data is clear after submitting the form
問題描述
我正在使用 javascript
當我提交表單時，我將數據存儲在表格中，但表格數據也很清楚
索引.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 = "";
}
我正在使用帶有 javascript 的 html
當我提交表單時，我無法在表中看到數據，我進行了調試，我可以看到數據存儲在表中，但隨后表中的數據很清楚。
4 個解決方案
解決方案1
0 2022-07-11 04:42:14
這是我的解決方案，您需要每次插入一行，然后不要提交，只需清除表單即可！
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>
解決方案2
0 2022-07-11 04:49:01
你只需要阻止表單刷新頁面然后你只需要刪除清除表單單元格 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 = "";
}
解決方案3
0 2022-07-11 04:54:10
您應該在 js 腳本中全局聲明數據對象。 此外，在自定義按鈕單擊功能中使用event.preventDefault() 。
此外，我更改了 insertnewrecord() 函數以處理表中的多個插入操作。
檢查以下代碼：
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>
解決方案4
-1 2022-07-11 04:39:57
使用 event.preventDefault(); 在您的 onFormSubmit 函數中https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
提交后無法清除表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.