How to get the id of a form containing a dropdown list with JavaScript?

Javascript Web Development Front End Scripts

In this tutorial, we will learn how to get the id of a form containing a dropdown list using JavaScript.

The id property of an HTML element gives a unique id. The id property value must be unique inside the HTML content. The style sheet property points to a specific declaration of style. JavaScript also uses it to access and alter the element with the specified id.

The id property is used to provide an element with a unique identifier. On a web page, you cannot have more than one element with the same id.

A dropdown menu in a computer GUI is a menu that provides a list of options. The menu title or the presently chosen item in the list is always visible. When the visible item is selected, more items from the list "dropdown" into view, from which the user can select.

Following are the methods using which we can get the id of a form containing a dropdown list with JavaScript −

Using the id Property

In JavaScript, utilize the id property to obtain the id of a form containing a dropdown list. This id property returns or sets the id attribute value of an element. The Element interface's id property represents the element's identification, mirroring the global id attribute. If the id value is not empty, it must be unique inside a document.

The id is frequently used in conjunction with getElementById() to fetch a specific element. Another typical scenario is to utilize the ID of an element as a selector when decorating the document with CSS.

Syntax

var value = document.getElementById("select").form.id;

The getElementbyId() fetches an option from the dropdown menu to get the form's id and stores it in the value variable.

Example

In this example, we are using the id property of JavaScript to fetch the form's id containing a dropdown list. A form with the id "myForm1" is created, which contains a button. Another form with the id "myForm2" is created, containing a dropdown list.

That dropdown list has options of Basic, Intermediate, Advanced, and Expert. This list's id is found using the form.id property. The user must click the "Get form id" button to see the form id after clicking. That value is stored in the form1 variable. This is printed to the output.


<html>
<body>
   <p> Get the id of a form containing dropdown list using <i> id
   property </i> in JavaScript </p>
   <button onclick = "myFunction()"> Get Form id </button>
   <p id = "root"> </p>
   <form id = "myForm1">
      <p> Select JavaScript course from below given options </p>
   </form>
   <form id = "myForm2">
      <select id = "mySelect">
         <option> Basic </option>
         <option> Intermediate </option>
         <option> Advanced </option>
         <option> Expert </option>
      </select>
   </form>
   <script>
      document.getElementById("root").onclick = function()
      {myFunction()};
      function myFunction() {
         var form1 = document.getElementById("mySelect").form.id;
         document.getElementById("root").innerHTML = "Form id with
         dropdown: "+form1;
      }
   </script>
</body>
</html>

Using jQuery Library

JQuery is a JavaScript library that is compact, fast, and equipped with features. A working, easy-to-use API that can be used across many browsers simplifies HTML document navigation and manipulation, event handling, animation, and Ajax. jQuery has altered how millions of people write JavaScript due to its versatility and extensibility.

We use the closest form attribute in jQuery to get the id of a form containing a dropdown list. This attribute returns the form id, which is passed to the function.

Syntax

var form = $( "#myForm" ).closest("form").attr("id");

The form variable stores the form's name, which contains the dropdown list and the id to be displayed.

Example

In this example, we used an external library called jQuery to retrieve the id of a form with a dropdown list. A form with the id "myForm1" is generated, complete with a button. Another form with the id "myForm2" is generated, containing a dropdown list.

Basic, Intermediate, Advanced, and Expert are the selections in the dropdown list. The id of this list is determined by using jQuery's closest id attribute. The user must click the button "Get form id" to see the form id. This is saved in the form2 variable. This is the value that is displayed.


<html>
<head>
   <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
   <form id = "myForm1">
      <p> Select JavaScript course from below given options </p>
   </form>
   <form id = "myForm2">
      <select id = "mySelect">
         <option> Basic </option>
         <option> Intermediate </option>
         <option> Advanced </option>
         <option> Expert </option>
      </select>
   </form>
   <button onclick = "myFunction()"> Get Form id </button>
   <p id = "result"> </p>
   <script>
      document.getElementById("result").onclick = function()
      {myFunction()};
      function myFunction() {
         var form2 = $( "#myForm2" ).closest("form").attr("id");
         document.getElementById("result").innerHTML = "Form id with
         dropdown: "+form2;
      }
   </script>
</body>
</html>

In this tutorial, we have come across two techniques to get the id of a form that contains a dropdown list using JavaScript. The first technique is to use the id property of JavaScript. The second technique is to use an external JavaScript library named jQuery which will fetch the id of the specific form which contains a dropdown list.