在 JavaScript 中重置表單

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在沒有 jQuery 的 JavaScript 中重置表單
  2. 在 JavaScript 中使用 jQuery 重置表單
在 JavaScript 中重置表單

本教程將教我們如何使用和不使用 jQuery 在 JavaScript 中重置表單。reset() 方法將表單元素恢復為預設值。

JavaScript 中的 reset() 方法的功能與 HTML 重置按鈕相同。

對於所有 JavaScript 程式碼示例,以下 HTML 程式碼保持不變。

<!DOCTYPE html>
<html>
	<body>
		<p>
      		fill the text boxes with some text content and press the "Reset form" button to reset the form.
    	</p>
		<form id="form">
  			First name: <input type="text" name="firstname"><br>
  			Last name: <input type="text" name="lastname"><br><br>
 			<input type="button" onclick="resetForm()" value="Reset form">
		</form>
	</body>
</html>

在沒有 jQuery 的 JavaScript 中重置表單

JavaScript 程式碼:

function resetForm() {
 	document.getElementById("form").reset();
}

輸出:

在 javascript 中重置表單 - 在沒有 jquery 的情況下重置表單

上層解決方案是純 JavaScript。resetForm() 函式在 Reset form 按鈕單擊時執行。

reset() 方法既不接受引數也不返回任何值。

在 JavaScript 中使用 jQuery 重置表單

請記住將 jQuery 庫包含在 <head> 元素中以練習以下程式碼示例。

JavaScript 程式碼:

function resetForm() {
 	$("#form").trigger('reset')
}

輸出:

在 javascript 中重置表單 - 使用 jquery 重置表單第一部分

上面的解決方案是用 jQuery 實現的。trigger() 函式觸發特定事件和事件的預設行為(如表單提交),用於挑選出的元素。

trigger() 方法類似於 triggerHandler() 函式,除了 triggerHandler() 不會觸發事件的預設行為。

以下是我們可以使用的另一個 jQuery 解決方案。它是 document.getElementById("form").reset(); 的反映。

JavaScript 程式碼:

function resetForm() {
 	$("#form")[0].reset();
}

輸出:

在 javascript 中重置表單 - 使用 jquery 重置表單第二部分

請記住,如果表單的任何欄位具有屬性 name="reset"reset() 方法將不起作用。它給你以下錯誤。

"<a class='gotoLine' href='#55:17] Uncaught TypeError: $(...)[0'>55:17] Uncaught TypeError: $(...)[0</a>.reset is not a function"
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Form