如何用JavaScript实现HTML文本框重置（排除指定项）及代码修复

核心问题 #

1. 原resetForm()函数会清空ID输入框，但你需要保留自动递增的下一个ID值，这与需求冲突。
2. 提交后输入框未重置，是因为insertNewRecord中设置ID值后，resetForm又将其清空，同时你可能因ID框的异常表现误以为所有输入框都未生效。

修改方案 #

1. 调整resetForm函数，排除指定输入框（ID） #

修改resetForm，只清空需要重置的输入框，保留ID框的自动递增值：

function resetForm() {
  // 保留ID框的值，仅重置其他字段
  document.getElementById('last').value = '';
  document.getElementById('first').value = '';
  document.getElementById('email').value = '';
  document.getElementById('mobile').value = '';
  document.getElementById('location').value = '';
  selectedRow = null;
}

2. 修正ID值的设置逻辑 #

在insertNewRecord中移除不必要的data修改操作，确保ID框的递增值不会被后续逻辑覆盖：

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

3. 修复表单提交的事件参数问题 #

原onFormSubmit函数声明了参数但未使用，改为传入事件对象并调用preventDefault：

function onFormSubmit(e) {
  e.preventDefault();
  var formData = readFormData();
  if (selectedRow === null) {
    insertNewRecord(formData);
  } else {
    updateRecord(formData);
    // 编辑完成后，将ID框恢复为下一个递增值
    document.getElementById("id").value = nextId;
  }
  resetForm();
}

4. 统一input类型为标准类型 #

原代码中使用了非标准的type="last"、type="first"、type="location"，浏览器会默认当作text类型，但改为标准类型可避免潜在问题：

<input type="text" id="last" name="last" required>
<input type="text" id="first" name="first" required>
<input type="text" id="location" name="location" required>

完整修改后的代码 #

JavaScript #

var selectedRow = null;
var nextId = 1;
document.getElementById("id").value = nextId;

function onFormSubmit(e) {
  e.preventDefault();
  var formData = readFormData();
  if (selectedRow === null) {
    insertNewRecord(formData);
  } else {
    updateRecord(formData);
    document.getElementById("id").value = nextId;
  }
  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;
}

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('last').value = '';
  document.getElementById('first').value = '';
  document.getElementById('email').value = '';
  document.getElementById('mobile').value = '';
  document.getElementById('location').value = '';
  selectedRow = null;
}

HTML（修改input类型部分） #

<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">
        <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="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>
      <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="text" 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>

CSS部分保持原代码即可。

效果验证 #

• 提交新增表单后，ID输入框显示下一个递增值，其他输入框自动清空。
• 编辑记录提交后，表格数据更新，ID框恢复为下一个递增值，其他输入框清空。

内容的提问来源于stack exchange，提问作者mbgaming