
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to get the id of a form containing a dropdown list with JavaScript?
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.
- Related Articles
- How to get the number of options in the dropdown list with JavaScript?
- How to remove options from a dropdown list with JavaScript?
- How to show all the options from a dropdown list with JavaScript?
- How to display the selected option in a dropdown list with JavaScript?
- How to select multiple options in a dropdown list with JavaScript?
- How to create a dropdown list using JavaScript?
- How to show the index of the selected option in a dropdown list with JavaScript?
- How to find the id of the form a button belongs to in JavaScript?
- How to get the value of the id attribute a link in JavaScript?
- JavaScript get the length of select options(dropdown)?
- How to create a clickable dropdown menu with CSS and JavaScript?
- How to Auto-Update a Dropdown List in Excel?
- How to return the id of the first image in a document with JavaScript?
- How to get id from tr tag and display it in a new td with JavaScript?
- How to get the data associated with the maximum id in a MySQL table?
