Question 226333 in Html Question posted in
Some basic documentation can be found here.

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

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

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>?</span>make sure that you add the correct information.</p>
    </form>

  </div>
</div>
Tags:

2

Answers


  1. 0

    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 
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search