資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 JavaScript 中提交表單後清除表單內容，而不使用 reset 方法？
在網際網路上，我們很少能找到不包含表單的網站。大多數網站包含聯絡表單，有些包含工作申請表單，有些包含產品訂單表單。
表單允許我們從使用者那裡獲取輸入，並在應用程式的前端或後端進行操作。此外，為了嚮應用程式使用者提供良好的使用者體驗，我們需要在使用者提交表單後重置所有表單資料。
在本教程中，我們將學習幾種方法來清除表單的輸入欄位，一旦使用者按下提交按鈕。
提交表單後清除單個輸入欄位
在本部分中，我們將學習如何清除表單的單個輸入欄位。有時，它需要使用者透過更改某些輸入值來多次提交表單。因此，在這種情況下，我們可以分別清除某些輸入欄位，而不是清除所有輸入欄位。
語法
使用者可以按照以下語法清除表單的單個輸入欄位。
let input1 = document.getElementById('input1');
input1.value = "";
在上面的語法中，我們透過其 ID 訪問表單的輸入，並將空字串賦值給輸入的值。
示例
在下面的示例中，我們建立了一個包含單個輸入的表單。當用戶按下“清除輸入欄位”按鈕時，它將呼叫clearText()函式，該函式將重置輸入欄位的值。
在輸出中，使用者可以觀察到，當他們按下提交按鈕時，它會清除輸入欄位。
<html>
<body>
<h3>Clearing only single input field of form when a user submits the form</h3>
<p>Please enter a string below:</p>
<form>
<input type = "text" id = "input1" />
<br> <br>
</form>
<button type = "submit" onclick = "clearText()"> clear input field</button>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
function clearText(event) {
// access input field
let input1 = document.getElementById('input1');
// clear the input field.
input1.value = "";
output.innerHTML += "Form submitted successfully! <br>";
}
</script>
</body>
</html>
提交表單後清除表單的所有輸入欄位
有時，我們可能需要清除表單的所有輸入欄位。我們可以使用JavaScript的querySelector()方法來選擇表單的所有輸入欄位，這將返回所有輸入欄位的陣列。
之後，我們可以遍歷輸入陣列，並透過將其值屬性賦值為空字串來清除每個輸入。
語法
使用者可以按照以下語法訪問所有輸入並清除它們。
var allInputs = document.querySelectorAll('input');
allInputs.forEach(singleInput => singleInput.value = '');
在上面的語法中，“inputs”是所有輸入的陣列，我們使用了forEach()迴圈方法來遍歷所有輸入。
示例
在下面的示例中，我們建立了多種不同型別的多輸入表單。之後，在 JavaScript 中，我們使用querySelector()方法選擇所有輸入。在forEach()迴圈中，我們傳遞了回撥函式，該函式為每個輸入的值屬性設定空字串。
當用戶點選“清除所有輸入”按鈕時，它將清除所有輸入欄位。
<html>
<body>
<h3>Clearing only all input fields of form when a user submits the form</h3>
<form>
First Name: <input type = "text" id = "input1" />
<br> <br>
Last Name: <input type = "text" id = "input2" />
<br> <br>
Email: <input type = "email" id = "input3" />
<br> <br>
</form>
<button type = "submit" onclick = "clearAllInputs()"> clear all inputs </button>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
function clearAllInputs(event) {
var allInputs = document.querySelectorAll('input');
allInputs.forEach(singleInput => singleInput.value = '');
output.innerHTML += "Form submitted and cleared successfully! <br>";
}
</script>
</body>
</html>
使用 form.reset() 方法重置整個表單
form.reset()是 JavaScript 中用於清除表單的內建方法。我們可以用它來將表單中的所有值重置為預設值。
語法
使用者可以按照以下語法使用reset()方法在使用者提交表單時重置整個表單。
formToReset.reset();
在上面的語法中，formToReset() 是要重置的表單元素。
示例
下面的示例演示了reset()方法的使用。它包含具有兩個不同輸入欄位的表單。此外，我們建立了一個型別為“提交”的按鈕，使用者可以按它來提交表單。
在 JavaScript 中，我們使用了事件監聽器來提交事件，並在提交事件時執行 reset() 方法。
<html>
<body>
<h3>Clearing only the form using the reset() method when a user submits the form</h3>
<form id = "demo_form">
Name: <input type = "text" id = "input1" />
<br> <br>
Email:<input type = "email" id = "input3" />
<br> <br>
<button type = "submit"> clear all inputs </button>
</form>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
const formToReset = document.getElementById('demo_form');
formToReset.addEventListener('submit', (e) => {
e.preventDefault();
formToReset.reset();
output.innerHTML += "The form is resetted successfully!"
});
</script>
</body>
</html>
我們已經成功學習了三種在提交表單後清除表單的方法。使用者可以使用 reset() 方法清除整個表單。此外，使用者還可以僅使用第二種方法清除表單的輸入欄位。使用者應該使用第一種方法僅清除特定輸入欄位。
41K+ 次瀏覽
