如何在 JavaScript 中查詢按鈕所屬表單的 id？

在本教程中，我們將學習如何使用 JavaScript 查詢按鈕所屬表單元素的 id。在 HTML 中，我們可以透過兩種方式在表單標籤中使用按鈕標籤，當點選按鈕時可以執行表單中的某些操作，如下所示：

  • 按鈕位於 FORM 標籤內
  • 按鈕位於 FORM 標籤外

無論按鈕位於何處，無論是在內部還是外部，我們都可以使用 JavaScript 找到按鈕所屬表單標籤的 ID。

讓我們瞭解使用 JavaScript 查詢按鈕所屬表單 ID 的兩種方法。

按鈕位於表單標籤內

讓我們首先了解當按鈕標籤位於表單標籤內時，如何獲取表單標籤的 ID。

語法

以下語法將用於獲取按鈕位於表單標籤內時表單的 ID：

let id = accessed_button_element.form.id;

在此語法中，.form 屬性用於獲取按鈕所屬的表單，.id 用於獲取該表單的 ID。

步驟

  • 步驟 1 - 在第一步中，我們需要使用分配給按鈕的相應 ID 或類來訪問按鈕元素。
  • 步驟 2 - 在下一步中，我們將對訪問的按鈕元素使用上述語法來獲取其所屬表單的 ID。
  • 步驟 3 - 在第三步中，我們將使用 JavaScript 顯示按鈕所屬表單的 ID。

示例 1

以下示例將說明如何使用 JavaScript 獲取按鈕位於表單標籤內時表單的 ID：

<!DOCTYPE html>
<html>
<body>
   <h3>Find the id of the form a button belongs to in JavaScript</h3>
   <p>Click the below button to see its FORM id.</p>
   <form id="myForm">
      <label>Username:</label><br>
      <input type="text"><br><br>
      <button id="btn" type="button" onclick="display()">My Button</button>
   </form>
   <p id="result"></p>
   <script>
      function display() {
         let btn = document.getElementById("btn");
         let id = btn.form.id;
         document.getElementById('result').innerHTML =
         "<b>Form Id of above button is: " + id + "</b>";
      }
   </script>
</body>
</html>

在這個例子中，我們看到了在按鈕位於表單內部時查詢表單 ID 的方法。在這裡，我們訪問 btn 變數內部的按鈕標籤，然後使用 .form.id 語法獲取其所屬表單的 ID，之後將其儲存在一個名為 id 的新變數中，以便輕鬆地在使用者螢幕上顯示它。

按鈕位於表單標籤外

在 HTML 中，我們可以將按鈕和表單標籤用作不同的元素，然後使用 form 屬性將兩者連線起來。

form 屬性用於將表單標籤連線到位於其外部的任何元素。要將外部元素與表單標籤連線，您需要將與表單標籤 ID 相同的值傳遞給 form 屬性的值。

假設一個表單的 ID 值為 form1，那麼要將任何外部元素連線到該表單，您需要使用 form 屬性並將其值設定為與表單 ID 相同的值，即 form1。

語法

以下語法將解釋當按鈕標籤位於表單外部時如何查詢表單 ID 的值：

let id = accessed_button_element.getAttribute("form");

在上述語法中，JavaScript 的 getAttribute() 方法用於獲取傳遞到其中的屬性的值。

步驟

  • 步驟 1 - 我們將訪問外部按鈕元素作為第一步，使用分配給它的相應類或 ID。
  • 步驟 2 - 在下一步中，我們將使用 JavaScript 的內建方法 getAttribute() 來訪問按鈕元素，它返回傳遞到其中的屬性的值。
  • 步驟 3 - 在第三步中，我們將顯示分配給表單元素的 ID 的值，該值是在上一步中提取的。

讓我們透過一個 JavaScript 程式碼示例來了解此方法查詢按鈕所屬表單 ID 的工作原理：

示例

<!DOCTYPE html>
<html>
<body>
   <h3>Find the id of the form a button belongs to in JavaScript</h3>
   <p>Click the below button to see its FORM id.</p>
   <form id="myForm">
      <label>Username:</label><br>
      <input type="text"><br><br>
   </form>
   <button id="btn" type="button" form="myForm" onclick="display()">My Button</button>
   <p id="result"></p>
   <script>
      function display() {
         let btn = document.getElementById("btn");
         let id = btn.getAttribute('form');
         document.getElementById('result').innerHTML =
         "<b>Form Id of above button is: " + id + "</b>";
      }
   </script>
</body>
</html>

在上面的示例中，我們在表單標籤外部聲明瞭按鈕標籤，然後透過將相同的值傳遞給 form 屬性（該值與表單標籤的 ID 相同）來使用 form 屬性將兩者連線起來。之後，我們透過傳遞 form 屬性來使用 getAttribute() 方法，它為我們提供了 form 屬性的值，該值與表單標籤的 ID 相同。透過這種方式，我們可以使用位於表單外部但仍屬於該表單的按鈕標籤來獲取表單的 ID。

在本教程中，我們瞭解了兩種使用 JavaScript 查詢按鈕所屬表單 ID 的方法。閱讀完本教程後，您將能夠使用任何屬於該表單的標籤（無論是在表單標籤內部還是外部）來查詢表單的 ID。

更新於： 2022-10-31

5K+ 閱讀量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.