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