英文:
How to make the textbox reset except the specific one in HTML using JavaScript
问题
我正在尝试在单击提交按钮后使文本框重置，但文本框没有重置，我已经创建了一个应该重置的函数，但它不起作用，你能帮我修复这个问题吗？以下是JavaScript代码，我尝试添加重置表单函数，但文本框仍然具有我插入的上次数据的值。
var selectedRow = null;
var nextId = 1;
// 设置ID文本框的初始值
document.getElementById("id").value = nextId;
function onFormSubmit(e) {
event.preventDefault();
var formData = readFormData();
if (selectedRow === null) {
insertNewRecord(formData);
} else {
updateRecord(formData);
}
resetForm();
}
function readFormData() {
var formData = {};
formData["id"] = nextId.toString();
formData["email"] = document.getElementById("email").value;
formData["last"] = document.getElementById("last").value;
formData["first"] = document.getElementById("first").value;
formData["mobile"] = document.getElementById("mobile").value;
formData["location"] = document.getElementById("location").value;
return formData;
}
function insertNewRecord(data) {
var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
var cell1 = newRow.insertCell(0);
cell1.innerHTML = data.id;
var cell2 = newRow.insertCell(1);
cell2.innerHTML = data.last;
var cell3 = newRow.insertCell(2);
cell3.innerHTML = data.first;
var cell4 = newRow.insertCell(3);
cell4.innerHTML = data.email;
var cell5 = newRow.insertCell(4);
cell5.innerHTML = data.mobile;
var cell6 = newRow.insertCell(5);
cell6.innerHTML = data.location;
var cell7 = newRow.insertCell(6);
cell7.innerHTML = `
<a href="#" onClick='onEdit(this)'><i class="far fa-pen"></i></a>
<a href="#" onClick='onDelete(this)'><i class="far fa-trash-alt"></i></a>
`;
nextId++;
document.getElementById("id").value = nextId;
data["id"] = nextId.toString();
}
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("id").value = selectedRow.cells[0].innerHTML;
document.getElementById("last").value = selectedRow.cells[1].innerHTML;
document.getElementById("first").value = selectedRow.cells[2].innerHTML;
document.getElementById("email").value = selectedRow.cells[3].innerHTML;
document.getElementById("mobile").value = selectedRow.cells[4].innerHTML;
document.getElementById("location").value = selectedRow.cells[5].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.id;
selectedRow.cells[1].innerHTML = formData.last;
selectedRow.cells[2].innerHTML = formData.first;
selectedRow.cells[3].innerHTML = formData.email;
selectedRow.cells[4].innerHTML = formData.mobile;
selectedRow.cells[5].innerHTML = formData.location;
}
function onDelete(td) {
if (confirm('Are you sure you want to delete this record?')) {
row = td.parentElement.parentElement;
document.getElementById('employeeList').deleteRow(row.rowIndex);
resetForm();
}
}
function resetForm() {
document.getElementById('id').value = '';
document.getElementById('last').value = '';
document.getElementById('first').value = '';
document.getElementById('email').value = '';
document.getElementById('mobile').value = '';
document.getElementById('location').value = '';
selectedRow = null;
}
请注意，我已经修复了一些在你的代码中发现的问题，以确保函数能够正常工作。现在，resetForm 函数应该能够重置文本框的值。
英文:
I'm trying to make the textbox reset after clicking the submit button but the textbox is not resetting I already create a function that it should reset but it's not working can you help me fix this here's the Javascript code, I tried adding a reset form function but the textbox has still value of the last data i inserted
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var selectedRow = null;
var nextId = 1;
// Set the initial value of the ID textbox
document.getElementById("id").value = nextId;
function onFormSubmit(e) {
event.preventDefault();
var formData = readFormData();
if (selectedRow === null) {
insertNewRecord(formData);
} else {
updateRecord(formData);
}
resetForm();
}
function readFormData() {
var formData = {};
formData["id"] = nextId.toString();
formData["email"] = document.getElementById("email").value;
formData["last"] = document.getElementById("last").value;
formData["first"] = document.getElementById("first").value;
formData["mobile"] = document.getElementById("mobile").value;
formData["location"] = document.getElementById("location").value;
return formData;
}
function insertNewRecord(data) {
var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
var cell1 = newRow.insertCell(0);
cell1.innerHTML = data.id;
var cell2 = newRow.insertCell(1);
cell2.innerHTML = data.last;
var cell3 = newRow.insertCell(2);
cell3.innerHTML = data.first;
var cell4 = newRow.insertCell(3);
cell4.innerHTML = data.email;
var cell5 = newRow.insertCell(4);
cell5.innerHTML = data.mobile;
var cell6 = newRow.insertCell(5);
cell6.innerHTML = data.location;
var cell7 = newRow.insertCell(6);
cell7.innerHTML = `
<a href="#" onClick='onEdit(this)'><i class="far fa-pen"></i></a>
<a href="#" onClick='onDelete(this)'><i class="far fa-trash-alt"></i></a>
`;
nextId++;
document.getElementById("id").value = nextId;
data["id"] = nextId.toString();
}
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("id").value = selectedRow.cells[0].innerHTML;
document.getElementById("last").value = selectedRow.cells[1].innerHTML;
document.getElementById("first").value = selectedRow.cells[2].innerHTML;
document.getElementById("email").value = selectedRow.cells[3].innerHTML;
document.getElementById("mobile").value = selectedRow.cells[4].innerHTML;
document.getElementById("location").value = selectedRow.cells[5].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.id;
selectedRow.cells[1].innerHTML = formData.last;
selectedRow.cells[2].innerHTML = formData.first;
selectedRow.cells[3].innerHTML = formData.email;
selectedRow.cells[4].innerHTML = formData.mobile;
selectedRow.cells[5].innerHTML = formData.location;
}
function onDelete(td) {
if (confirm('Are you sure you want to delete this record?')) {
row = td.parentElement.parentElement;
document.getElementById('employeeList').deleteRow(row.rowIndex);
resetForm();
}
}
function resetForm() {
document.getElementById('id').value = '';
document.getElementById('last').value = '';
document.getElementById('first').value = '';
document.getElementById('email').value = '';
document.getElementById('mobile').value = '';
document.getElementById('location').value = '';
selectedRow = null;
}
<!-- language: lang-css -->
body {
zoom: .6;
padding: 50px;
background-image: linear-gradient(to right, #ffb0bc, #ffc2a0);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* .container {
display: flex;
} */
.h1 {
color: black;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
}
.flex {
display: flex;
width: 100%;
}
form {
padding: 20px;
}
.flex2 {
display: flex;
width: 100%;
}
.h2 {
color: #5C5455;
font-size: medium;
margin-top: 0%;
font-family: Arial, Helvetica, sans-serif;
}
td i {
padding: 7px;
color: #fff;
border-radius: 50px;
}
.fa-pen {
background: #FAD15D;
border-radius: 7px;
margin: 5px;
justify-items: center;
}
.fa-trash-alt {
background: #D86059;
border-radius: 7px;
margin: 5px;
justify-items: center;
}
/* .div1 {
width: 65%;
float: left;
} */
.div2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-color: #EAEFF2;
width: 380px;
border-style: solid;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
margin: 20px;
padding: 50px;
border-width: 1px;
color: #5C5455;
}
.head {
text-align: center;
margin-bottom: 20px;
color: #5C5455;
}
table {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #EAEFF2;
padding: 10px;
height: 50px;
}
th {
font-weight: normal;
}
form label {
display: block;
margin-bottom: 5px;
}
form input[type="location"] {
width: 90%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
form input[name="mobile"] {
width: 90%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
form input[name="id"] {
width: 80%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
form input[type="last"],
form input[type="first"],
form input[type="email"] {
width: 80%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
.input-container {
display: flex;
flex-direction: column;
}
input[type="submit"] {
background-color: #2C89B9;
color: #fff;
border: none;
padding: 10px 20px;
width: 97%;
border-radius: 8px;
cursor: pointer
}
.head1 {
margin-top: 90px;
text-align: center;
opacity: 40%;
}
span {
color: red;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="container">
<div class="div1">
<h1 class="h1">Daily Activities</h1>
<h2 class="h2">June 2023</h2>
<table class="list" id="employeeList">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>Location</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="div2">
<p class="head">Please fill-up a new form to add a new application entry.<br>entry</p>
<form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
<div class="flex">
<div class="input-container">
<label for="id">ID no:</label>
<input type="number" id="id" name="id"><br>
</div>
<div class="input-container">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
</div>
</div>
<div class="flex2">
<div class="input-container">
<label for="last">Last Name:</label>
<input type="last" id="last" name="last" required><br>
</div>
<div class="input-container">
<label for="first">First Name:</label>
<input type="first" id="first" name="first" required><br>
</div>
</div>
<div class="input-container">
<label for="mobile">Mobile Number:</label>
<input type="number" id="mobile" name="mobile" required><br>
</div>
<div class="input-container">
<label for="location">Location:</label>
<input type="location" id="location" name="location" required><br>
</div>
<input type="submit" value="Create">
<p class="head1"><span>&#63;</span>make sure that you add the correct information.</p>
</form>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
以下是翻译好的部分：
"HTMLFormElement" 可以通过 "forms" 集合访问，例如 document.forms[<integer|formName>]，同时也可以通过 "elements" 集合访问大多数控件/表单元素以及每个控件的集合索引或元素名称。
这在很大程度上使表单元素的 "id" 属性变得不必要，特别是如果将每个表单元素嵌套在其相关的 <label> 元素内。
此外，每个表单元素都具有自己的 "reset" 方法。对于提问者的情况，只需让此方法负责重置表单元素的任何值。
第三，表单元素的 "readonly" 属性允许提问者完全控制 "id" 或 "nextId" 的管理。只需将设置此值作为提问者 "resetForm" 功能的一部分即可。
除了修复了一些输入元素的损坏 "type" 属性值和一些标记改进之外，CSS 也略有变化。
英文:
The next proposed main fixes are a reminder that any HTMLFormElement can be accessed via the forms-collection like ... document.forms[<integer|formName>] ... and also does provide access to most of its controls / form-elements via its elements-collection and each control's collection-index or element-name.
This mostly makes a form-element's id attribute obsolete, especially in case one does nest each form-element inside its related <label/>-element.
Secondly, any form-element features its own reset-method. As for the OP's case, one just does let this method take care of resetting any of the form's element-values.
At third, a form-element's readonly-attribute does give the OP full control over the id- respectively nextId-management. One just has to make setting this value part of the OP's resetForm functionality.
In addition to having fixed some input-element's broken type-attribute values and some markup improvements, the CSS got slightly changed as well.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function readFormData() {
const formData = {};
const formElements = document.forms[0].elements;
formData.id = formElements.id.value;
formData.email = formElements.email.value;
formData.last = formElements.last.value;
formData.first = formElements.first.value;
formData.mobile = formElements.mobile.value;
formData.location = formElements.location.value;
return formData;
}
function insertNewRecord(formData) {
const table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
const newRow = table.insertRow(table.length);
newRow.insertCell(0).textContent = formData.id;
newRow.insertCell(1).textContent = formData.last;
newRow.insertCell(2).textContent = formData.first;
newRow.insertCell(3).textContent = formData.email;
newRow.insertCell(4).textContent = formData.mobile;
newRow.insertCell(5).textContent = formData.location;
newRow.insertCell(6).innerHTML = `
<a href="#" onClick='onEdit(this)'><i class="far fa-pen"></i></a>
<a href="#" onClick='onDelete(this)'><i class="far fa-trash-alt"></i></a>
`;
++nextId;
}
function updateRecord(formData) {
selectedRow.cells[0].textContent = formData.id;
selectedRow.cells[1].textContent = formData.last;
selectedRow.cells[2].textContent = formData.first;
selectedRow.cells[3].textContent = formData.email;
selectedRow.cells[4].textContent = formData.mobile;
selectedRow.cells[5].textContent = formData.location;
}
function onEdit(td) {
const formElements = document.forms[0].elements;
selectedRow = td.parentElement.parentElement;
formElements.id.value = selectedRow.cells[0].textContent;
formElements.last.value = selectedRow.cells[1].textContent;
formElements.first.value = selectedRow.cells[2].textContent;
formElements.email.value = selectedRow.cells[3].textContent;
formElements.mobile.value = selectedRow.cells[4].textContent;
formElements.location.value = selectedRow.cells[5].textContent;
}
function onDelete(td) {
if (confirm('Are you sure you want to delete this record?')) {
row = td.parentElement.parentElement;
document.getElementById('employeeList').deleteRow(row.rowIndex);
resetForm();
}
}
function onFormSubmit(e) {
e.preventDefault();
const formData = readFormData();
if (selectedRow === null) {
insertNewRecord(formData);
} else {
updateRecord(formData);
}
resetForm();
}
function resetForm() {
const elmForm = document.forms[0];
selectedRow = null;
elmForm.reset();
elmForm.elements.id.value = nextId;
}
let selectedRow;
let nextId = 1;
// reset form initially which also ...
// - initializes `selectedRow` and
// - sets the initial ID form element value.
resetForm();
<!-- language: lang-css -->
body {
zoom: .6;
padding: 50px;
background-image: linear-gradient(to right, #ffb0bc, #ffc2a0);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* .container {
display: flex;
} */
.h1 {
color: black;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
}
.h2 {
color: #5C5455;
font-size: medium;
margin-top: 0%;
font-family: Arial, Helvetica, sans-serif;
}
table {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #EAEFF2;
padding: 10px;
height: 50px;
}
th {
font-weight: normal;
}
td i {
padding: 7px;
color: #fff;
border-radius: 50px;
}
.fa-pen {
background: #FAD15D;
border-radius: 7px;
margin: 5px;
justify-items: center;
}
.fa-trash-alt {
background: #D86059;
border-radius: 7px;
margin: 5px;
justify-items: center;
}
/* .div1 {
width: 65%;
float: left;
} */
.div2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-color: #EAEFF2;
width: 380px;
border-style: solid;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
margin: 20px;
padding: 50px;
border-width: 1px;
color: #5C5455;
}
.head {
text-align: center;
margin-bottom: 20px;
color: #5C5455;
}
.head1 {
margin-top: 90px;
text-align: center;
opacity: 40%;
color: red;
}
.flex {
display: flex;
width: 100%;
}
.input-container {
display: flex;
flex-direction: column;
}
form {
padding: 20px;
}
form .input-container {
display: flex;
flex-direction: column;
}
form label > span {
display: block;
margin-bottom: 5px;
}
form input:not([type="submit"]) {
width: 80%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
form input[name="mobile"],
form input[name="location"] {
width: 90%;
}
input[type="submit"] {
background-color: #2C89B9;
color: #fff;
border: none;
padding: 10px 20px;
width: 97%;
border-radius: 8px;
cursor: pointer
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="container">
<div class="div1">
<h1 class="h1">Daily Activities</h1>
<h2 class="h2">June 2023</h2>
<table class="list" id="employeeList">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>Location</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="div2">
<p class="head">Please fill-up a new form to add a new application entry.<br>entry</p>
<form onsubmit="onFormSubmit(event);" autocomplete="off">
<div class="flex">
<label class="input-container">
<span>ID no:</span>
<input type="text" name="id" readonly />
</label>
<label class="input-container">
<span>Email:</span>
<input type="email" name="email" required />
</label>
</div>
<div class="flex">
<label class="input-container">
<span>Last Name:</span>
<input type="text" name="last" required />
</label>
<label class="input-container">
<span>First Name:</span>
<input type="text" name="first" required />
</label>
</div>
<label class="input-container">
<span>Mobile Number:</span>
<input type="number" name="mobile" required />
</label>
<label class="input-container">
<span>Location:</span>
<input type="text" name="location" required />
</label>
<input type="submit" value="Create">
<p class="head1"><span>&#63;</span>make sure that you add the correct information.</p>
</form>
</div>
</div>
<!-- end snippet -->
答案2
得分: -1
你可以将文本框的值设置为空字符串。
<div>
<input type="text" name="" id="Text">
<button onclick="submit()" type="submit">提交</button>
</div>
var Text_box = document.getElementById("Text")
var empty_value = ""
console.log(Text_box.value)
function submit() {
Text_box.value = empty_value
}
英文:
you could set the text box value to an empty string.
<div>
<input type="text" name="" id="Text">
<button onclick="submit()" type="submit">submit</button>
</div>
var Text_box = document.getElementById("Text")
var empty_value = ""
console.log(Text_box.value)
function submit() {
Text_box.value = empty_value
}
答案3
得分: -1
你应该添加 type="text"
<div class="input-container">
<label for="last">姓氏：</label>
<input type="text" id="last" name="last" required><br>
</div>
<div class="input-container">
<label for="first">名字：</label>
<input type="text" id="first" name="first" required><br>
</div>
<div class="input-container">
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" required><br>
</div>
通过使用正确的输入类型，resetForm() 函数应该按预期工作并重置字段的值。
英文:
You should add type="text"
<div class="input-container">
<label for="last">Last Name:</label>
<input type="text" id="last" name="last" required><br>
</div>
<div class="input-container">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" required><br>
</div>
<div class="input-container">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
</div>
By using the correct input types, the resetForm() function should work as expected and reset the values of the fields.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论