如何在 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>

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

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

更新於：2022-10-31

5K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告
© . All rights reserved.