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