如何使用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年9月6日

42K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告