How to find the id of the form a button belongs to in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how we can find the id of the form element to which a button belongs using JavaScript. In HTML, we can use button tag in two ways with form tag, where it can be used to perform some activity in the form when it is clicked, as listed below −

Button is inside the FORM tag
Button is outside the FORM tag

No matter where the button is located, whether it is inside or outside, we can find the ID of the form tag to which the button belongs using JavaScript.

Let us understand both the ways of finding the ID of form a button belongs to using JavaScript.

Button is inside the form tag

Let us first understand how we can get the ID of form tag when the button tag located inside the form tag.

Syntax

Following syntax will be used to get the ID of Form when the button lies inside the form tag −

let id = accessed_button_element.form.id;

In this syntax, the .form property is used to get the form to which the button belongs, and the .id is used to get the ID of that form.

Steps

Step 1 − In the first step, we need to access the button element using the corresponding ID or class given to it.
Step 2 − In the next step, we will use the above syntax on the accessed button element to get the ID of form it belongs to.
Step 3 − In the third step, we will display the ID of the Form to which the button belongs using JavaScript.

Example 1

The below example will illustrate the way to get the ID of the form when the button lies inside the form tag using JavaScript −


<!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>

In this example, we have seen the way of finding ID of form when button is inside it. Here, we access the button tag inside the btn variable, then use the .form.id syntax to get the ID of the form it belongs to, after that we store it inside a new variable named id to display it easily on user screen.

Button is outside the form tag

In HTML, we can use the button and form tag as different elements, and then connect both of them using the form attribute.

The form attribute is used to connect form tag to any element that is outside it. To connect the outer element with form tag, you need to pass the same value to the value of form attribute that was given to the ID of form tag.

Suppose a form has ID value as form1, then to connect any outer element to that form, you need to use form attribute and give it value same as form ID i.e. form1.

Syntax

Following syntax will explain how we can find value of form ID when button tag is outside the form −

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

In the above syntax, getAttribute() method of JavaScript is used to get the value of the attribute that will be passed inside it.

Steps

Step 1 − We will access the outer button element as the first step, using the corresponding class or ID given to it.
Step 2 − In the next step, we will use the getAttribute() the in-built method of JavaScript to the accessed button element, that returns the value of the attribute passed inside it.
Step 3 − In the third step, we will display the value of the ID given to the form element, that is extracted in the previous step.

Let us see the working of this method to find the ID of the form a button belongs to with the help of a JavaScript code example −

Example


<!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>

In above example, we have declared the button tag outside the form tag and then connect both of them using the form attribute by passing it the same value as given to the ID of form tag. After that, we used the getAttribute() method by passing form attribute to it which gives us the value of form attribute that is same as the ID of the form tag. In this way, we can get the ID of form using button tag that is outside that form but still belongs to it.

In this tutorial, we have seen two ways of finding the ID of form a button belongs to using JavaScript. After reading this tutorial, you will be able to find the ID of the form using any tag that belongs to it whether it is outside or inside the form tag.