使用 jQuery 重置 HTML 表單

Sheeraz Gul 2023年1月30日 2022年7月18日
  1. 在 jQuery 中使用 trigger() 方法重置 HTML 表單
  2. 建立一個 jQuery 表單物件並使用 JavaScript 的 reset() 方法重置 HTML 表單
使用 jQuery 重置 HTML 表單

jQuery 沒有類似 JavaScript 的 reset() 方法,但我們可以使用 jQuery 的 trigger() 方法來重置 HTML 表單。本教程演示如何使用 trigger() 方法在 jQuery 中重置 HTML 表單。

在 jQuery 中使用 trigger() 方法重置 HTML 表單

trigger() 方法可以觸發選定元素上的指定事件處理程式。我們可以將此方法與 reset 引數一起使用來重置 HTML 表單。

trigger() 方法重置表單的語法是:

$("Form").trigger("reset");

Form 是表單的選擇器,它可以是 id、class 或 form 關鍵字。

讓我們嘗試一個例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ResetForm Using JQuery</title>
</head>
<body>
    <form action="" method="post" id="DemoForm">
        <label>Name:</label>
        <input type="text" name="name">
        <br><br>
        <label>ID:</label>
        <input type="text" name="id">
        <br><br>
        <label>Address:</label>
        <input type="text" name="address">
        <br><br
        <label>Salary:</label>
        <input type="number" name="salary">
        <input type="submit" value="Submit">
    </form>
    <br>
    <button type="button" id='ResetButton'>Reset Form</button>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#ResetButton").click(function(){
            $("#DemoForm").trigger("reset");
        });
    });
    </script>
</body>
</html>

上面的程式碼將在按鈕單擊時重置表單。見輸出:

jQuery 觸發器重置表單

建立一個 jQuery 表單物件並使用 JavaScript 的 reset() 方法重置 HTML 表單

在 jQuery 中重置表單的另一種方法是,我們可以建立表單的 jQuery 物件並使用 JavaScript reset() 方法重置它。此方法的語法是:

$("#DemoForm")[0].reset()

[0] 會將 jQuery 物件轉換為 JavaScript 物件,然後應用 reset() 方法。

有關此方法,請參見以下示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reset Form Using JQuery</title>
</head>
<body>
    <form action="" method="post" id="DemoForm">
        <label>Name:</label>
        <input type="text" name="name">
        <br><br>
        <label>ID:</label>
        <input type="text" name="id">
        <br><br>
        <label>Address:</label>
        <input type="text" name="address">
        <br><br
        <label>Salary:</label>
        <input type="number" name="salary">
        <input type="submit" value="Submit">
    </form>
    <br>
    <button type="button" id='ResetButton'>Reset Form</button>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    $(document).ready(function() {
            $("ResetButton").click(function() {
                $("#DemoForm")[0].reset()
            });
        });
    </script>
</body>
</html>

上面的程式碼將 jQuery 物件轉換為 JavaScript 並使用 reset() 方法重置表單。見輸出:

jQuery 重置表單

Author: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook