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

huangapple go评论117阅读模式
英文:

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

问题

我正在尝试在单击提交按钮后重置文本框,但是文本框没有重置。我已经创建了一个应该重置文本框的函数,但它不起作用。你能帮我修复这个问题吗?以下是JavaScript代码,我尝试添加了一个重置表单的函数,但是文本框仍然保留上次插入的值。

  1. var selectedRow = null;
  2. var nextId = 1;
  3. // Set the initial value of the ID textbox
  4. document.getElementById("id").value = nextId;
  5. function onFormSubmit(e) {
  6. event.preventDefault();
  7. var formData = readFormData();
  8. if (selectedRow === null) {
  9. insertNewRecord(formData);
  10. } else {
  11. updateRecord(formData);
  12. }
  13. resetForm();
  14. }
  15. function readFormData() {
  16. var formData = {};
  17. formData["id"] = nextId.toString();
  18. formData["email"] = document.getElementById("email").value;
  19. formData["last"] = document.getElementById("last").value;
  20. formData["first"] = document.getElementById("first").value;
  21. formData["mobile"] = document.getElementById("mobile").value;
  22. formData["location"] = document.getElementById("location").value;
  23. return formData;
  24. }
  25. function insertNewRecord(data) {
  26. var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
  27. var newRow = table.insertRow(table.length);
  28. var cell1 = newRow.insertCell(0);
  29. cell1.innerHTML = data.id;
  30. var cell2 = newRow.insertCell(1);
  31. cell2.innerHTML = data.last;
  32. var cell3 = newRow.insertCell(2);
  33. cell3.innerHTML = data.first;
  34. var cell4 = newRow.insertCell(3);
  35. cell4.innerHTML = data.email;
  36. var cell5 = newRow.insertCell(4);
  37. cell5.innerHTML = data.mobile;
  38. var cell6 = newRow.insertCell(5);
  39. cell6.innerHTML = data.location;
  40. var cell7 = newRow.insertCell(6);
  41. cell7.innerHTML = `
  42. <a href="#" onClick='onEdit(this)'><i class="far fa-pen"></i></a>
  43. <a href="#" onClick='onDelete(this)'><i class="far fa-trash-alt"></i></a>
  44. `;
  45. nextId++;
  46. document.getElementById("id").value = nextId;
  47. data["id"] = nextId.toString();
  48. }
  49. function onEdit(td) {
  50. selectedRow = td.parentElement.parentElement;
  51. document.getElementById("id").value = selectedRow.cells[0].innerHTML;
  52. document.getElementById("last").value = selectedRow.cells[1].innerHTML;
  53. document.getElementById("first").value = selectedRow.cells[2].innerHTML;
  54. document.getElementById("email").value = selectedRow.cells[3].innerHTML;
  55. document.getElementById("mobile").value = selectedRow.cells[4].innerHTML;
  56. document.getElementById("location").value = selectedRow.cells[5].innerHTML;
  57. }
  58. function updateRecord(formData) {
  59. selectedRow.cells[0].innerHTML = formData.id;
  60. selectedRow.cells[1].innerHTML = formData.last;
  61. selectedRow.cells[2].innerHTML = formData.first;
  62. selectedRow.cells[3].innerHTML = formData.email;
  63. selectedRow.cells[4].innerHTML = formData.mobile;
  64. selectedRow.cells[5].innerHTML = formData.location;
  65. }
  66. function onDelete(td) {
  67. if (confirm('Are you sure you want to delete this record?')) {
  68. row = td.parentElement.parentElement;
  69. document.getElementById('employeeList').deleteRow(row.rowIndex);
  70. resetForm();
  71. }
  72. }
  73. function resetForm() {
  74. document.getElementById('id').value = '';
  75. document.getElementById('last').value = '';
  76. document.getElementById('first').value = '';
  77. document.getElementById('email').value = '';
  78. document.getElementById('mobile').value = '';
  79. document.getElementById('location').value = '';
  80. selectedRow = null;
  81. }

希望这可以帮助你解决问题。

英文:

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

  1. var selectedRow = null;
  2. var nextId = 1;
  3. // Set the initial value of the ID textbox
  4. document.getElementById(&quot;id&quot;).value = nextId;
  5. function onFormSubmit(e) {
  6. event.preventDefault();
  7. var formData = readFormData();
  8. if (selectedRow === null) {
  9. insertNewRecord(formData);
  10. } else {
  11. updateRecord(formData);
  12. }
  13. resetForm();
  14. }
  15. function readFormData() {
  16. var formData = {};
  17. formData[&quot;id&quot;] = nextId.toString();
  18. formData[&quot;email&quot;] = document.getElementById(&quot;email&quot;).value;
  19. formData[&quot;last&quot;] = document.getElementById(&quot;last&quot;).value;
  20. formData[&quot;first&quot;] = document.getElementById(&quot;first&quot;).value;
  21. formData[&quot;mobile&quot;] = document.getElementById(&quot;mobile&quot;).value;
  22. formData[&quot;location&quot;] = document.getElementById(&quot;location&quot;).value;
  23. return formData;
  24. }
  25. function insertNewRecord(data) {
  26. var table = document.getElementById(&quot;employeeList&quot;).getElementsByTagName(&#39;tbody&#39;)[0];
  27. var newRow = table.insertRow(table.length);
  28. var cell1 = newRow.insertCell(0);
  29. cell1.innerHTML = data.id;
  30. var cell2 = newRow.insertCell(1);
  31. cell2.innerHTML = data.last;
  32. var cell3 = newRow.insertCell(2);
  33. cell3.innerHTML = data.first;
  34. var cell4 = newRow.insertCell(3);
  35. cell4.innerHTML = data.email;
  36. var cell5 = newRow.insertCell(4);
  37. cell5.innerHTML = data.mobile;
  38. var cell6 = newRow.insertCell(5);
  39. cell6.innerHTML = data.location;
  40. var cell7 = newRow.insertCell(6);
  41. cell7.innerHTML = `
  42. &lt;a href=&quot;#&quot; onClick=&#39;onEdit(this)&#39;&gt;&lt;i class=&quot;far fa-pen&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  43. &lt;a href=&quot;#&quot; onClick=&#39;onDelete(this)&#39;&gt;&lt;i class=&quot;far fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  44. `;
  45. nextId++;
  46. document.getElementById(&quot;id&quot;).value = nextId;
  47. data[&quot;id&quot;] = nextId.toString();
  48. }
  49. function onEdit(td) {
  50. selectedRow = td.parentElement.parentElement;
  51. document.getElementById(&quot;id&quot;).value = selectedRow.cells[0].innerHTML;
  52. document.getElementById(&quot;last&quot;).value = selectedRow.cells[1].innerHTML;
  53. document.getElementById(&quot;first&quot;).value = selectedRow.cells[2].innerHTML;
  54. document.getElementById(&quot;email&quot;).value = selectedRow.cells[3].innerHTML;
  55. document.getElementById(&quot;mobile&quot;).value = selectedRow.cells[4].innerHTML;
  56. document.getElementById(&quot;location&quot;).value = selectedRow.cells[5].innerHTML;
  57. }
  58. function updateRecord(formData) {
  59. selectedRow.cells[0].innerHTML = formData.id;
  60. selectedRow.cells[1].innerHTML = formData.last;
  61. selectedRow.cells[2].innerHTML = formData.first;
  62. selectedRow.cells[3].innerHTML = formData.email;
  63. selectedRow.cells[4].innerHTML = formData.mobile;
  64. selectedRow.cells[5].innerHTML = formData.location;
  65. }
  66. function onDelete(td) {
  67. if (confirm(&#39;Are you sure you want to delete this record?&#39;)) {
  68. row = td.parentElement.parentElement;
  69. document.getElementById(&#39;employeeList&#39;).deleteRow(row.rowIndex);
  70. resetForm();
  71. }
  72. }
  73. function resetForm() {
  74. document.getElementById(&#39;id&#39;).value = &#39;&#39;;
  75. document.getElementById(&#39;last&#39;).value = &#39;&#39;;
  76. document.getElementById(&#39;first&#39;).value = &#39;&#39;;
  77. document.getElementById(&#39;email&#39;).value = &#39;&#39;;
  78. document.getElementById(&#39;mobile&#39;).value = &#39;&#39;;
  79. document.getElementById(&#39;location&#39;).value = &#39;&#39;;
  80. selectedRow = null;
  81. }

<!-- language: lang-css -->

  1. body {
  2. zoom: .6;
  3. padding: 50px;
  4. background-image: linear-gradient(to right, #ffb0bc, #ffc2a0);
  5. }
  6. /* Chrome, Safari, Edge, Opera */
  7. input::-webkit-outer-spin-button,
  8. input::-webkit-inner-spin-button {
  9. -webkit-appearance: none;
  10. margin: 0;
  11. }
  12. /* .container {
  13. display: flex;
  14. } */
  15. .h1 {
  16. color: black;
  17. font-size: x-large;
  18. font-family: Arial, Helvetica, sans-serif;
  19. }
  20. .flex {
  21. display: flex;
  22. width: 100%;
  23. }
  24. form {
  25. padding: 20px;
  26. }
  27. .flex2 {
  28. display: flex;
  29. width: 100%;
  30. }
  31. .h2 {
  32. color: #5C5455;
  33. font-size: medium;
  34. margin-top: 0%;
  35. font-family: Arial, Helvetica, sans-serif;
  36. }
  37. td i {
  38. padding: 7px;
  39. color: #fff;
  40. border-radius: 50px;
  41. }
  42. .fa-pen {
  43. background: #FAD15D;
  44. border-radius: 7px;
  45. margin: 5px;
  46. justify-items: center;
  47. }
  48. .fa-trash-alt {
  49. background: #D86059;
  50. border-radius: 7px;
  51. margin: 5px;
  52. justify-items: center;
  53. }
  54. /* .div1 {
  55. width: 65%;
  56. float: left;
  57. } */
  58. .div2 {
  59. display: flex;
  60. flex-direction: column;
  61. align-items: center;
  62. justify-content: center;
  63. border-color: #EAEFF2;
  64. width: 380px;
  65. border-style: solid;
  66. border-radius: 10px;
  67. font-family: Arial, Helvetica, sans-serif;
  68. font-size: small;
  69. margin: 20px;
  70. padding: 50px;
  71. border-width: 1px;
  72. color: #5C5455;
  73. }
  74. .head {
  75. text-align: center;
  76. margin-bottom: 20px;
  77. color: #5C5455;
  78. }
  79. table {
  80. font-family: Arial, Helvetica, sans-serif;
  81. font-size: small;
  82. border-collapse: collapse;
  83. width: 100%;
  84. }
  85. td,
  86. th {
  87. border: 1px solid #EAEFF2;
  88. padding: 10px;
  89. height: 50px;
  90. }
  91. th {
  92. font-weight: normal;
  93. }
  94. form label {
  95. display: block;
  96. margin-bottom: 5px;
  97. }
  98. form input[type=&quot;location&quot;] {
  99. width: 90%;
  100. padding: 10px;
  101. margin-bottom: 10px;
  102. background-color: #FABFA3;
  103. border: 1px solid #EAEFF2;
  104. border-radius: 8px;
  105. }
  106. form input[name=&quot;mobile&quot;] {
  107. width: 90%;
  108. padding: 10px;
  109. margin-bottom: 10px;
  110. background-color: #FABFA3;
  111. border: 1px solid #EAEFF2;
  112. border-radius: 8px;
  113. }
  114. form input[name=&quot;id&quot;] {
  115. width: 80%;
  116. padding: 10px;
  117. margin-bottom: 10px;
  118. background-color: #FABFA3;
  119. border: 1px solid #EAEFF2;
  120. border-radius: 8px;
  121. }
  122. form input[type=&quot;last&quot;],
  123. form input[type=&quot;first&quot;],
  124. form input[type=&quot;email&quot;] {
  125. width: 80%;
  126. padding: 10px;
  127. margin-bottom: 10px;
  128. background-color: #FABFA3;
  129. border: 1px solid #EAEFF2;
  130. border-radius: 8px;
  131. }
  132. .input-container {
  133. display: flex;
  134. flex-direction: column;
  135. }
  136. input[type=&quot;submit&quot;] {
  137. background-color: #2C89B9;
  138. color: #fff;
  139. border: none;
  140. padding: 10px 20px;
  141. width: 97%;
  142. border-radius: 8px;
  143. cursor: pointer
  144. }
  145. .head1 {
  146. margin-top: 90px;
  147. text-align: center;
  148. opacity: 40%;
  149. }
  150. span {
  151. color: red;
  152. }

<!-- language: lang-html -->

  1. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot; integrity=&quot;sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot; crossorigin=&quot;anonymous&quot; /&gt;
  2. &lt;div class=&quot;container&quot;&gt;
  3. &lt;div class=&quot;div1&quot;&gt;
  4. &lt;h1 class=&quot;h1&quot;&gt;Daily Activities&lt;/h1&gt;
  5. &lt;h2 class=&quot;h2&quot;&gt;June 2023&lt;/h2&gt;
  6. &lt;table class=&quot;list&quot; id=&quot;employeeList&quot;&gt;
  7. &lt;thead&gt;
  8. &lt;tr&gt;
  9. &lt;th&gt;ID&lt;/th&gt;
  10. &lt;th&gt;Last Name&lt;/th&gt;
  11. &lt;th&gt;First Name&lt;/th&gt;
  12. &lt;th&gt;Email&lt;/th&gt;
  13. &lt;th&gt;Mobile Number&lt;/th&gt;
  14. &lt;th&gt;Location&lt;/th&gt;
  15. &lt;th&gt;&lt;/th&gt;
  16. &lt;/tr&gt;
  17. &lt;/thead&gt;
  18. &lt;tbody&gt;
  19. &lt;/tbody&gt;
  20. &lt;/table&gt;
  21. &lt;/div&gt;
  22. &lt;div class=&quot;div2&quot;&gt;
  23. &lt;p class=&quot;head&quot;&gt;Please fill-up a new form to add a new application entry.&lt;br&gt;entry&lt;/p&gt;
  24. &lt;form onsubmit=&quot;event.preventDefault();onFormSubmit();&quot; autocomplete=&quot;off&quot;&gt;
  25. &lt;div class=&quot;flex&quot;&gt;
  26. &lt;div class=&quot;input-container&quot;&gt;
  27. &lt;label for=&quot;id&quot;&gt;ID no:&lt;/label&gt;
  28. &lt;input type=&quot;number&quot; id=&quot;id&quot; name=&quot;id&quot;&gt;&lt;br&gt;
  29. &lt;/div&gt;
  30. &lt;div class=&quot;input-container&quot;&gt;
  31. &lt;label for=&quot;email&quot;&gt;Email:&lt;/label&gt;
  32. &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required&gt;&lt;br&gt;
  33. &lt;/div&gt;
  34. &lt;/div&gt;
  35. &lt;div class=&quot;flex2&quot;&gt;
  36. &lt;div class=&quot;input-container&quot;&gt;
  37. &lt;label for=&quot;last&quot;&gt;Last Name:&lt;/label&gt;
  38. &lt;input type=&quot;last&quot; id=&quot;last&quot; name=&quot;last&quot; required&gt;&lt;br&gt;
  39. &lt;/div&gt;
  40. &lt;div class=&quot;input-container&quot;&gt;
  41. &lt;label for=&quot;first&quot;&gt;First Name:&lt;/label&gt;
  42. &lt;input type=&quot;first&quot; id=&quot;first&quot; name=&quot;first&quot; required&gt;&lt;br&gt;
  43. &lt;/div&gt;
  44. &lt;/div&gt;
  45. &lt;div class=&quot;input-container&quot;&gt;
  46. &lt;label for=&quot;mobile&quot;&gt;Mobile Number:&lt;/label&gt;
  47. &lt;input type=&quot;number&quot; id=&quot;mobile&quot; name=&quot;mobile&quot; required&gt;&lt;br&gt;
  48. &lt;/div&gt;
  49. &lt;div class=&quot;input-container&quot;&gt;
  50. &lt;label for=&quot;location&quot;&gt;Location:&lt;/label&gt;
  51. &lt;input type=&quot;location&quot; id=&quot;location&quot; name=&quot;location&quot; required&gt;&lt;br&gt;
  52. &lt;/div&gt;
  53. &lt;input type=&quot;submit&quot; value=&quot;Create&quot;&gt;
  54. &lt;p class=&quot;head1&quot;&gt;&lt;span&gt;&amp;#63;&lt;/span&gt;make sure that you add the correct information.&lt;/p&gt;
  55. &lt;/form&gt;
  56. &lt;/div&gt;
  57. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

下面是翻译好的内容:

下一个提议的主要修复是提醒任何HTMLFormElement都可以通过forms-collection访问,例如... document.forms[&lt;integer|formName&gt;]... 并且还可以通过其elements-collection访问大多数控件/表单元素以及每个控件的集合索引或元素名称。

这主要使得表单元素的id属性变得不再必要,特别是在每个表单元素都嵌套在其相关的&lt;label/&gt;-element内的情况下。

其次,任何表单元素都具有自己的reset-method。对于 OP 的情况,只需让该方法负责重置表单元素的任何值。

第三,表单元素的readonly-attribute使得 OP 对id-或nextId-管理具有完全控制权。只需将设置该值作为 OP 的resetForm功能的一部分即可。

除了修复了一些输入元素的破损type-attribute值和一些标记改进之外,CSS 也略有改变。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  2. <!-- language: lang-js -->
  3. function readFormData() {
  4. const formData = {};
  5. const formElements = document.forms[0].elements;
  6. formData.id = formElements.id.value;
  7. formData.email = formElements.email.value;
  8. formData.last = formElements.last.value;
  9. formData.first = formElements.first.value;
  10. formData.mobile = formElements.mobile.value;
  11. formData.location = formElements.location.value;
  12. return formData;
  13. }
  14. function insertNewRecord(formData) {
  15. const table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
  16. const newRow = table.insertRow(table.length);
  17. newRow.insertCell(0).textContent = formData.id;
  18. newRow.insertCell(1).textContent = formData.last;
  19. newRow.insertCell(2).textContent = formData.first;
  20. newRow.insertCell(3).textContent = formData.email;
  21. newRow.insertCell(4).textContent = formData.mobile;
  22. newRow.insertCell(5).textContent = formData.location;
  23. newRow.insertCell(6).innerHTML = `
  24. <a href="#" onClick='onEdit(this)'><i class="far fa-pen"></i></a>
  25. <a href="#" onClick='onDelete(this)'><i class="far fa-trash-alt"></i></a>
  26. `;
  27. ++nextId;
  28. }
  29. function updateRecord(formData) {
  30. selectedRow.cells[0].textContent = formData.id;
  31. selectedRow.cells[1].textContent = formData.last;
  32. selectedRow.cells[2].textContent = formData.first;
  33. selectedRow.cells[3].textContent = formData.email;
  34. selectedRow.cells[4].textContent = formData.mobile;
  35. selectedRow.cells[5].textContent = formData.location;
  36. }
  37. function onEdit(td) {
  38. const formElements = document.forms[0].elements;
  39. selectedRow = td.parentElement.parentElement;
  40. formElements.id.value = selectedRow.cells[0].textContent;
  41. formElements.last.value = selectedRow.cells[1].textContent;
  42. formElements.first.value = selectedRow.cells[2].textContent;
  43. formElements.email.value = selectedRow.cells[3].textContent;
  44. formElements.mobile.value = selectedRow.cells[4].textContent;
  45. formElements.location.value = selectedRow.cells[5].textContent;
  46. }
  47. function onDelete(td) {
  48. if (confirm('Are you sure you want to delete this record?')) {
  49. row = td.parentElement.parentElement;
  50. document.getElementById('employeeList').deleteRow(row.rowIndex);
  51. resetForm();
  52. }
  53. }
  54. function onFormSubmit(e) {
  55. e.preventDefault();
  56. const formData = readFormData();
  57. if (selectedRow === null) {
  58. insertNewRecord(formData);
  59. } else {
  60. updateRecord(formData);
  61. }
  62. resetForm();
  63. }
  64. function resetForm() {
  65. const elmForm = document.forms[0];
  66. selectedRow = null;
  67. elmForm.reset();
  68. elmForm.elements.id.value = nextId;
  69. }
  70. let selectedRow;
  71. let nextId = 1;
  72. // reset form initially which also ...
  73. // - initializes `selectedRow` and
  74. // - sets the initial ID form element value.
  75. resetForm();
  76. <!-- language: lang-css -->
  77. body {
  78. zoom: .6;
  79. padding: 50px;
  80. background-image: linear-gradient(to right, #ffb0bc, #ffc2a0);
  81. }
  82. /* Chrome, Safari, Edge, Opera */
  83. input::-webkit-outer-spin-button,
  84. input::-webkit-inner-spin-button {
  85. -webkit-appearance: none;
  86. margin: 0;
  87. }
  88. /* .container {
  89. display: flex;
  90. } */
  91. .h1 {
  92. color: black;
  93. font-size: x-large;
  94. font-family: Arial, Helvetica, sans-serif;
  95. }
  96. .h2 {
  97. color: #5C5455;
  98. font-size: medium;
  99. margin-top: 0%;
  100. font-family: Arial, Helvetica, sans-serif;
  101. }
  102. table {
  103. font-family: Arial, Helvetica, sans-serif;
  104. font-size: small;
  105. border-collapse: collapse;
  106. width: 100%;
  107. }
  108. td, th {
  109. border: 1px solid #EAEFF2;
  110. padding: 10px;
  111. height: 50px;
  112. }
  113. th {
  114. font-weight: normal;
  115. }
  116. td i {
  117. padding: 7px;
  118. color: #fff;
  119. border-radius: 50px;
  120. }
  121. .fa-pen {
  122. background: #FAD15D;
  123. border-radius: 7px;
  124. margin: 5px;
  125. justify-items: center;
  126. }
  127. .fa-trash-alt {
  128. background: #D86059;
  129. border-radius: 7px;
  130. margin: 5px;
  131. justify-items: center;
  132. }
  133. /* .div1 {
  134. width: 65%;
  135. float: left;
  136. } */
  137. .div2 {
  138. display: flex;
  139. flex-direction: column;
  140. align-items: center;
  141. justify-content: center;
  142. border-color: #EAEFF2;
  143. width: 380px;
  144. border-style: solid;
  145. border-radius: 10px;
  146. font-family: Arial, Helvetica, sans-serif;
  147. font-size: small;
  148. margin: 20px;
  149. padding: 50px;
  150. border-width: 1px;
  151. color: #5C5455;
  152. }
  153. .head {
  154. text-align: center;
  155. margin-bottom: 20px;
  156. color: #5C5455;
  157. }
  158. .head1 {
  159. margin-top: 90px;
  160. text-align: center;
  161. opacity: 40%;
  162. color: red;
  163. }
  164. .flex {
  165. display: flex;
  166. width: 100%;
  167. }
  168. .input-container {
  169. display: flex;
  170. flex-direction: column;
  171. }
  172. form {
  173. padding: 20px;
  174. }
  175. form .input-container {
  176. display: flex;
  177. flex-direction: column;
  178. }
  179. form label > span {
  180. display: block;
  181. margin-bottom: 5px;
  182. }
  183. form input:not([type="submit"]) {
  184. width: 80%;
  185. padding: 10px;
  186. margin-bottom: 10px;
  187. background-color: #FABFA3;
  188. border: 1px solid #EAEFF2;
  189. border-radius: 8px;
  190. }
  191. form input[name="mobile"],
  192. form input[name="location"] {
  193. width: 90%;
  194. }
  195. input[type="submit"] {
  196. background-color: #2C89B9;
  197. color: #fff;
  198. border: none;
  199. padding: 10px 20px;
  200. width: 97%;
  201. border-radius: 8px;
  202. cursor: pointer
  203. }
  204. <!-- language: lang-html -->
  205. <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  206. <div class="container">
  207. <div class="div1">
  208. <h1 class="h1">Daily Activities</h1>
  209. <h2 class="h2">June 2023</h2>
  210. <table class="list" id="employeeList">
  211. <thead>
  212. <tr>
  213. <th>ID</th>
  214. <th>Last Name</th>
  215. <th>First Name</th>
  216. <th>Email</th>
  217. <th>Mobile Number</th>
  218. <th>Location</th>
  219. <th></th>
  220. </tr>
  221. </thead>
  222. <tbody>
  223. </tbody>
  224. </table>
  225. </div>
  226. <div class="div2">
  227. <p class="head">Please fill-up a new form to add a new application entry.<br>entry</p>
  228. <form onsubmit="onFormSubmit(event);" autocomplete="off">
  229. <div class="flex">
  230. <label class="input-container">
  231. <span>ID no:</span>
  232. <input type="text" name="id" readonly />
  233. </label>
  234. <label class="input-container">
  235. <span>Email:</span>
  236. <input type="email" name="email" required />
  237. </label>
  238. </div>
  239. <div class="flex">
  240. <label class="input-container">
  241. <span>Last Name:</span>
  242. <input type="text" name="last" required />
  243. </label>
  244. <label class="input-container">
  245. <span>First Name:</span>
  246. <input type="text" name="first" required />
  247. </label>
  248. </div>
  249. <label class="input-container">
  250. <span>Mobile Number:</span>
  251. <input type="number" name="mobile" required />
  252. </label>
  253. <label class="input-container">
  254. <span>Location:</span>
  255. <input type="text" name="location" required />
  256. </label>
  257. <input type="submit" value="Create">
  258. <p class="head1"><span>&#63;</span>make sure that you add the correct information.</p>
  259. </form>
  260. </div>
  261. </div>
  262. <!-- end snippet -->
英文:

The next proposed main fixes are a reminder that any HTMLFormElement can be accessed via the forms-collection like ... document.forms[&lt;integer|formName&gt;] ... 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 &lt;label/&gt;-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 -->

  1. function readFormData() {
  2. const formData = {};
  3. const formElements = document.forms[0].elements;
  4. formData.id = formElements.id.value;
  5. formData.email = formElements.email.value;
  6. formData.last = formElements.last.value;
  7. formData.first = formElements.first.value;
  8. formData.mobile = formElements.mobile.value;
  9. formData.location = formElements.location.value;
  10. return formData;
  11. }
  12. function insertNewRecord(formData) {
  13. const table = document.getElementById(&quot;employeeList&quot;).getElementsByTagName(&#39;tbody&#39;)[0];
  14. const newRow = table.insertRow(table.length);
  15. newRow.insertCell(0).textContent = formData.id;
  16. newRow.insertCell(1).textContent = formData.last;
  17. newRow.insertCell(2).textContent = formData.first;
  18. newRow.insertCell(3).textContent = formData.email;
  19. newRow.insertCell(4).textContent = formData.mobile;
  20. newRow.insertCell(5).textContent = formData.location;
  21. newRow.insertCell(6).innerHTML = `
  22. &lt;a href=&quot;#&quot; onClick=&#39;onEdit(this)&#39;&gt;&lt;i class=&quot;far fa-pen&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  23. &lt;a href=&quot;#&quot; onClick=&#39;onDelete(this)&#39;&gt;&lt;i class=&quot;far fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  24. `;
  25. ++nextId;
  26. }
  27. function updateRecord(formData) {
  28. selectedRow.cells[0].textContent = formData.id;
  29. selectedRow.cells[1].textContent = formData.last;
  30. selectedRow.cells[2].textContent = formData.first;
  31. selectedRow.cells[3].textContent = formData.email;
  32. selectedRow.cells[4].textContent = formData.mobile;
  33. selectedRow.cells[5].textContent = formData.location;
  34. }
  35. function onEdit(td) {
  36. const formElements = document.forms[0].elements;
  37. selectedRow = td.parentElement.parentElement;
  38. formElements.id.value = selectedRow.cells[0].textContent;
  39. formElements.last.value = selectedRow.cells[1].textContent;
  40. formElements.first.value = selectedRow.cells[2].textContent;
  41. formElements.email.value = selectedRow.cells[3].textContent;
  42. formElements.mobile.value = selectedRow.cells[4].textContent;
  43. formElements.location.value = selectedRow.cells[5].textContent;
  44. }
  45. function onDelete(td) {
  46. if (confirm(&#39;Are you sure you want to delete this record?&#39;)) {
  47. row = td.parentElement.parentElement;
  48. document.getElementById(&#39;employeeList&#39;).deleteRow(row.rowIndex);
  49. resetForm();
  50. }
  51. }
  52. function onFormSubmit(e) {
  53. e.preventDefault();
  54. const formData = readFormData();
  55. if (selectedRow === null) {
  56. insertNewRecord(formData);
  57. } else {
  58. updateRecord(formData);
  59. }
  60. resetForm();
  61. }
  62. function resetForm() {
  63. const elmForm = document.forms[0];
  64. selectedRow = null;
  65. elmForm.reset();
  66. elmForm.elements.id.value = nextId;
  67. }
  68. let selectedRow;
  69. let nextId = 1;
  70. // reset form initially which also ...
  71. // - initializes `selectedRow` and
  72. // - sets the initial ID form element value.
  73. resetForm();

<!-- language: lang-css -->

  1. body {
  2. zoom: .6;
  3. padding: 50px;
  4. background-image: linear-gradient(to right, #ffb0bc, #ffc2a0);
  5. }
  6. /* Chrome, Safari, Edge, Opera */
  7. input::-webkit-outer-spin-button,
  8. input::-webkit-inner-spin-button {
  9. -webkit-appearance: none;
  10. margin: 0;
  11. }
  12. /* .container {
  13. display: flex;
  14. } */
  15. .h1 {
  16. color: black;
  17. font-size: x-large;
  18. font-family: Arial, Helvetica, sans-serif;
  19. }
  20. .h2 {
  21. color: #5C5455;
  22. font-size: medium;
  23. margin-top: 0%;
  24. font-family: Arial, Helvetica, sans-serif;
  25. }
  26. table {
  27. font-family: Arial, Helvetica, sans-serif;
  28. font-size: small;
  29. border-collapse: collapse;
  30. width: 100%;
  31. }
  32. td, th {
  33. border: 1px solid #EAEFF2;
  34. padding: 10px;
  35. height: 50px;
  36. }
  37. th {
  38. font-weight: normal;
  39. }
  40. td i {
  41. padding: 7px;
  42. color: #fff;
  43. border-radius: 50px;
  44. }
  45. .fa-pen {
  46. background: #FAD15D;
  47. border-radius: 7px;
  48. margin: 5px;
  49. justify-items: center;
  50. }
  51. .fa-trash-alt {
  52. background: #D86059;
  53. border-radius: 7px;
  54. margin: 5px;
  55. justify-items: center;
  56. }
  57. /* .div1 {
  58. width: 65%;
  59. float: left;
  60. } */
  61. .div2 {
  62. display: flex;
  63. flex-direction: column;
  64. align-items: center;
  65. justify-content: center;
  66. border-color: #EAEFF2;
  67. width: 380px;
  68. border-style: solid;
  69. border-radius: 10px;
  70. font-family: Arial, Helvetica, sans-serif;
  71. font-size: small;
  72. margin: 20px;
  73. padding: 50px;
  74. border-width: 1px;
  75. color: #5C5455;
  76. }
  77. .head {
  78. text-align: center;
  79. margin-bottom: 20px;
  80. color: #5C5455;
  81. }
  82. .head1 {
  83. margin-top: 90px;
  84. text-align: center;
  85. opacity: 40%;
  86. color: red;
  87. }
  88. .flex {
  89. display: flex;
  90. width: 100%;
  91. }
  92. .input-container {
  93. display: flex;
  94. flex-direction: column;
  95. }
  96. form {
  97. padding: 20px;
  98. }
  99. form .input-container {
  100. display: flex;
  101. flex-direction: column;
  102. }
  103. form label &gt; span {
  104. display: block;
  105. margin-bottom: 5px;
  106. }
  107. form input:not([type=&quot;submit&quot;]) {
  108. width: 80%;
  109. padding: 10px;
  110. margin-bottom: 10px;
  111. background-color: #FABFA3;
  112. border: 1px solid #EAEFF2;
  113. border-radius: 8px;
  114. }
  115. form input[name=&quot;mobile&quot;],
  116. form input[name=&quot;location&quot;] {
  117. width: 90%;
  118. }
  119. input[type=&quot;submit&quot;] {
  120. background-color: #2C89B9;
  121. color: #fff;
  122. border: none;
  123. padding: 10px 20px;
  124. width: 97%;
  125. border-radius: 8px;
  126. cursor: pointer
  127. }

<!-- language: lang-html -->

  1. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot; integrity=&quot;sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot; crossorigin=&quot;anonymous&quot; /&gt;
  2. &lt;div class=&quot;container&quot;&gt;
  3. &lt;div class=&quot;div1&quot;&gt;
  4. &lt;h1 class=&quot;h1&quot;&gt;Daily Activities&lt;/h1&gt;
  5. &lt;h2 class=&quot;h2&quot;&gt;June 2023&lt;/h2&gt;
  6. &lt;table class=&quot;list&quot; id=&quot;employeeList&quot;&gt;
  7. &lt;thead&gt;
  8. &lt;tr&gt;
  9. &lt;th&gt;ID&lt;/th&gt;
  10. &lt;th&gt;Last Name&lt;/th&gt;
  11. &lt;th&gt;First Name&lt;/th&gt;
  12. &lt;th&gt;Email&lt;/th&gt;
  13. &lt;th&gt;Mobile Number&lt;/th&gt;
  14. &lt;th&gt;Location&lt;/th&gt;
  15. &lt;th&gt;&lt;/th&gt;
  16. &lt;/tr&gt;
  17. &lt;/thead&gt;
  18. &lt;tbody&gt;
  19. &lt;/tbody&gt;
  20. &lt;/table&gt;
  21. &lt;/div&gt;
  22. &lt;div class=&quot;div2&quot;&gt;
  23. &lt;p class=&quot;head&quot;&gt;Please fill-up a new form to add a new application entry.&lt;br&gt;entry&lt;/p&gt;
  24. &lt;form onsubmit=&quot;onFormSubmit(event);&quot; autocomplete=&quot;off&quot;&gt;
  25. &lt;div class=&quot;flex&quot;&gt;
  26. &lt;label class=&quot;input-container&quot;&gt;
  27. &lt;span&gt;ID no:&lt;/span&gt;
  28. &lt;input type=&quot;text&quot; name=&quot;id&quot; readonly /&gt;
  29. &lt;/label&gt;
  30. &lt;label class=&quot;input-container&quot;&gt;
  31. &lt;span&gt;Email:&lt;/span&gt;
  32. &lt;input type=&quot;email&quot; name=&quot;email&quot; required /&gt;
  33. &lt;/label&gt;
  34. &lt;/div&gt;
  35. &lt;div class=&quot;flex&quot;&gt;
  36. &lt;label class=&quot;input-container&quot;&gt;
  37. &lt;span&gt;Last Name:&lt;/span&gt;
  38. &lt;input type=&quot;text&quot; name=&quot;last&quot; required /&gt;
  39. &lt;/label&gt;
  40. &lt;label class=&quot;input-container&quot;&gt;
  41. &lt;span&gt;First Name:&lt;/span&gt;
  42. &lt;input type=&quot;text&quot; name=&quot;first&quot; required /&gt;
  43. &lt;/label&gt;
  44. &lt;/div&gt;
  45. &lt;label class=&quot;input-container&quot;&gt;
  46. &lt;span&gt;Mobile Number:&lt;/span&gt;
  47. &lt;input type=&quot;number&quot; name=&quot;mobile&quot; required /&gt;
  48. &lt;/label&gt;
  49. &lt;label class=&quot;input-container&quot;&gt;
  50. &lt;span&gt;Location:&lt;/span&gt;
  51. &lt;input type=&quot;text&quot; name=&quot;location&quot; required /&gt;
  52. &lt;/label&gt;
  53. &lt;input type=&quot;submit&quot; value=&quot;Create&quot;&gt;
  54. &lt;p class=&quot;head1&quot;&gt;&lt;span&gt;&amp;#63;&lt;/span&gt;make sure that you add the correct information.&lt;/p&gt;
  55. &lt;/form&gt;
  56. &lt;/div&gt;
  57. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: -1

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

  1. <div>
  2. <input type="text" name="" id="Text">
  3. <button onclick="submit()" type="submit">提交</button>
  4. </div>
  5. var Text_box = document.getElementById("Text")
  6. var empty_value = ""
  7. console.log(Text_box.value)
  8. function submit() {
  9. Text_box.value = empty_value
  10. }
英文:

you could set the text box value to an empty string.

  1. &lt;div&gt;
  2. &lt;input type=&quot;text&quot; name=&quot;&quot; id=&quot;Text&quot;&gt;
  3. &lt;button onclick=&quot;submit()&quot; type=&quot;submit&quot;&gt;submit&lt;/button&gt;
  4. &lt;/div&gt;
  5. var Text_box = document.getElementById(&quot;Text&quot;)
  6. var empty_value = &quot;&quot;
  7. console.log(Text_box.value)
  8. function submit() {
  9. Text_box.value = empty_value
  10. }

答案3

得分: -1

你应该添加 type="text"

  1. <div class="input-container">
  2. <label for="last">姓:</label>
  3. <input type="text" id="last" name="last" required><br>
  4. </div>
  5. <div class="input-container">
  6. <label for="first">名:</label>
  7. <input type="text" id="first" name="first" required><br>
  8. </div>
  9. <div class="input-container">
  10. <label for="email">邮箱:</label>
  11. <input type="email" id="email" name="email" required><br>
  12. </div>

通过使用正确的输入类型,resetForm() 函数应该按预期工作,并重置字段的值。

英文:

You should add type="text"

  1. &lt;div class=&quot;input-container&quot;&gt;
  2. &lt;label for=&quot;last&quot;&gt;Last Name:&lt;/label&gt;
  3. &lt;input type=&quot;text&quot; id=&quot;last&quot; name=&quot;last&quot; required&gt;&lt;br&gt;
  4. &lt;/div&gt;
  5. &lt;div class=&quot;input-container&quot;&gt;
  6. &lt;label for=&quot;first&quot;&gt;First Name:&lt;/label&gt;
  7. &lt;input type=&quot;text&quot; id=&quot;first&quot; name=&quot;first&quot; required&gt;&lt;br&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&quot;input-container&quot;&gt;
  10. &lt;label for=&quot;email&quot;&gt;Email:&lt;/label&gt;
  11. &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required&gt;&lt;br&gt;
  12. &lt;/div&gt;

By using the correct input types, the resetForm() function should work as expected and reset the values of the fields.

huangapple
  • 本文由 发表于 2023年8月9日 16:26:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76865891.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定