如何使用 JavaScript 重置文本框，但 HTML 中的特定文本框除外-解网

问：

我试图在单击提交按钮后重置文本框，但文本框没有重置我已经创建了一个它应该重置的函数，但它不起作用你能帮我解决这个问题吗这是 Javascript 代码，我尝试添加重置表单函数，但文本框仍然有我插入的最后一个数据的值

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;
}

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;
}

<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>

JavaScript HTML 表单 DOM 重置

0赞 Keyboard Corporation 8/9/2023

像这样调用函数，而不仅仅是 .this.resetForm();resetForm();

0赞 Peter Seliger 8/29/2023

@mbgaming......关于迄今为止提供的所有解决方案，还有什么问题吗？

答：

-1赞 David Ahonkhai 8/9/2023 #1

您可以将文本框值设置为空字符串。

<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 
}

-1赞 Sona Rijesh 8/9/2023 #2

你应该添加 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>

通过使用正确的输入类型，resetForm（）函数应按预期工作并重置字段的值。

1赞 Peter Seliger 8/9/2023 #3

下一个建议的主要修复程序是提醒人们，任何 HTMLFormElement 都可以通过表单集合访问，例如......并且还通过其 elements-collection 和每个控件的 collection-index 或 element-name 提供对其大多数控件/form-elements 的访问。document.forms[<integer|formName>]

这主要使表单元素的属性过时，尤其是在将每个表单元素嵌套在其相关的<标签/>元素中的情况下。id

其次，任何表单元素都有自己的重置方法。至于 OP 的情况，只是让这个方法负责重置表单的任何元素值。

第三，form-element 的 readonly-attribute 确实让 OP 完全控制了 - 分别 -管理。只需将设置此值作为 OP 功能的一部分即可。idnextIdresetForm

除了修复了一些输入元素损坏的类型属性值和一些标记改进之外，CSS 也略有变化。

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();

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
}

<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>

上一个：document.getElementById（）.innerHTML 不起作用，但我可以将该元素的值记录到控制台。这是怎么回事？

下一个：当我使用 JavaScript DOM 加载窗口时，我无法捕获输入的值

如何使用 JavaScript 重置文本框，但 HTML 中的特定文本框除外

How to make the textbox reset except the specific one in HTML using JavaScript

评论