如何使用 JavaScript 重置或清空表單？

本教程將教你如何使用 JavaScript 重置或清空表單。在使用者填寫錯誤表單並意識到錯誤，希望在提交前刪除所有資料的情況下，此選項非常有用。如果表單過大，手動刪除所有內容可能會很困難，因此最好使用 JavaScript 的reset() 方法。

reset() 方法在 JavaScript 中定義，只需點選它，與 onclick() 方法關聯的表單就會重置提供的表單的每個輸入部分。

語法

我們已經瞭解了 reset() 函式的基礎知識，現在讓我們來看一下它的語法：

var element = document.getElementById( Id_of_required_form ).
element.reset()

在上述語法中，“Id_of_required_form” 是我們要重置或清空的表單的 id。我們使用了 DOM 的 ‘getElementById’ 方法獲取表單，並將其儲存在名為 ‘element’ 的變數中。

然後，透過使用 reset() 方法，我們透過呼叫它來重置或清空 id 為 ‘Id_of_required_form’ 的表單元素。

演算法

我們已經瞭解了透過獲取表單 id 和 reset() 方法來重置或清空表單的語法，讓我們一步步檢視完整的演算法，以便更好地理解它：

建立使用者表單

在這些步驟中，我們將建立一個表單，在其中定義或建立許多輸入框供使用者輸入以填寫表單，以及一個按鈕，該按鈕將呼叫函式以從下拉列表中刪除物件。

  • 首先，我們必須使用 <form> 標籤建立一個表單，我們希望使用 JavaScript 的 reset() 方法重置或清空該表單。

  • 在表單中，我們使用 <input> 標籤建立了一些輸入框，使用者可以在其中寫入資料。

  • 這些輸入空間將是文字型別和數字型別，以便以所需的型別獲取使用者輸入。

  • 在表單中定義用於獲取使用者輸入的“輸入”後，我們將使用 <input> 標籤定義一個輸入欄位，並將其設定為按鈕型別，我們將定義 'onclick' 事件，該事件將呼叫我們稍後在指令碼中定義的函式。

定義刪除指令碼或函式

在這些步驟中，我們將定義將在上面定義的按鈕的 ‘onclick’ 事件中呼叫的函式。

  • 首先，我們將使用 ‘function’ 關鍵字建立一個函式，併為其命名，該名稱將在 ‘onclick’ 事件中呼叫。

  • 在定義的函式中，我們將建立一個變數來儲存對 ‘document.getElementById()’ 方法的呼叫的返回值。

  • 我們將上面定義的表單的 ‘id’ 作為引數傳遞給對 ‘document.getElementById()’ 方法的呼叫。

  • 透過對變數（包含對該方法的呼叫的返回值）使用 reset 方法，我們可以將每個輸入欄位重置為空。

這些是使用 JavaScript 重置或清空表單的基本步驟，現在讓我們看一些示例，以便更好地理解上述步驟。

示例

在這個示例中，我們將逐步實現上面定義的演算法，讓我們實現程式碼：

<!DOCTYPE html>
<html>
<body>
   <h3>Fill out the below-given form and click the reset button to see the working of the reset() function in JavaScript.</h3>
   <form id=" form_id ">
      Student Name <br>
      <input type="text" name="sname"> <br>

      Student Subject <br>
      <input type = "password" name = "ssubject" > <br>

      Student Roll Number <br>
      <input type = "roll_no" name = "roll_number" > <br>
      <input type = "button" onclick = "newFunction()" value = "Reset" >
   </form>
   <script>
      function newFunction(){
        var element = document.getElementById(" form_id ");
         element.reset()
      }
   </script>
</body>
</html>

在上面的輸出中，我們得到一個表單，其中有一些輸入空間，使用者可以在其中提供一些輸入，最後有一個重置按鈕，它會將表單重置為原始或初始表單。

結論

在本教程中，我們學習了使用 JavaScript 重置或清空 HTML 表單的方法。只有在定義 HTML 表單 時，程式設計師定義或建立了一個供使用者重置表單的按鈕，否則使用者必須手動重置它。

reset() 函式在 JavaScript 中定義，只需點選它，與 onclick() 方法關聯的表單就會重置提供的表單的每個輸入部分。此外，如果任何輸入存在任何預定義值，它將獲取該值。

更新於：2023-09-06

42K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告