How to Assign a Hidden Value From a Drop Down in Javascript
JavaScript is a language that is widely used to alter user interfaces dynamically. Using JavaScript, Web developers can access the elements that are part of the HTML document object model, directly identifying, assessing and manipulating the elements that comprise HTML pages. HTML DOM elements are simply HTML elements and have a variety of attributes typically available. These attributes, including visibility attributes, can have their values dynamically altered, added or deleted based on actions taken by the end user, such as selecting a value from a drop-down menu.
Other People Are Reading
Instructions
-
-
1
Open a text editor and create a new text file named dropdownHidden.html. Typically, selecting "New" from the "File" menu creates new files.
-
2
Add some basic HTML tags to the file, including an <html> tag, a <head> tag, a </head> tag, a <body> tag, a </body> tag and an </html> tag.
-
-
3
Add an open <script> tag and a close </script> tag to the file. Set the script's type attribute to "text/javascript." Any text placed between these two delimiters will be considered JavaScript code when the page loads.
-
4
Declare a JavaScript function named "storeVal()" and add an open curly brace -- { -- and a close curly brace -- } -- to indicate the location of the function's body. The storeVal function takes no arguments.
-
5
Declare a variable named "hiddenId" between the storeVal() function's open and close curly braces. Use the JavaScript document.getElementById method to retrieve the location of a hidden input field with the id "hiddenField".
-
6
Declare a second variable named "dropDownId" on the line after the hiddenId variable. Use the document.getElementById method to retrieve the location of the drop-down menu that will be used to populate the hidden input field.
-
7
Declare a third variable named "selectedElement" on the line after the dropDownId variable. Use the dropDownId reference to retrieve the index for the item selected from the drop-down menu.
-
8
Set the "hiddenId" variable's "value" to the "selectedElement" variable. Add this code on the line after the selectedElement variable.
-
9
Create a HTML drop-down menu by placing a <select> tag between the <body> and </body> tags in dropdownHidden.html. Give the <select> tag an "id" value of "dropdown". Use an "onClick" event to call the storeVal function when the user selects an item from the drop-down menu. Assign one <option> tag to the <select> menu with a value of "A". Label the <option> tag "A" and close the </option> tag. Assign a second <option> tag to the <select> menu with a value of "B". Label the <option> tag "B", close the </option> tag and close the </select> tag.
-
10
Add an HTML <input> tag to the file immediately following the </select> tag. Give the <input> tag a type attribute "hidden" and the id "hiddenField". Save and close dropdownHidden.html. DropdownHidden.html will appear as shown below:
<html>
<head>
<script type="text/javascript">
function storeVal()
{
var hiddenId = document.getElementById("hiddenField");
var dropdownId = document.getElementById("dropdown");
var selectedElement = dropdownId.options[dropdownId.selectedIndex].value;
hiddenId.value = selectedElement;
}
</script>
</head>
<body>
<select id="dropdown" onChange="storeVal();">
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="hidden" id="hiddenField">
</body>
</html>
-
11
Open dropdownHidden.html in a Web browser. Select the "A" item from the drop down to save the value to the hidden field. Because the field is hidden, it will be slightly complicated to verify the code visually. Refer to the Tips section for help.
-
1
Tips & Warnings
The HTML document object model includes a number of objects, including images and forms.
An input field with the type attribute "hidden" will not appear when testing code that places information in a hidden field. Try changing the type attribute to "text" during testing.
Other values that can be used with the <input> tag include text, password, check box, radio, submit, reset, file, hidden, image and button.
Some slight differences may exist in the HTML DOM in older versions of Web browsers. Most of these differences have been resolved in more recent browsers.
References
Resources
- Photo Credit Creatas Images/Creatas/Getty Images
