How to Get the Value of Combo Box with JavaScript

Save

JavaScript is a scripting language that can function as both an object-oriented and a procedural language. JavaScript is bundled with most major browsers and runs when a page that includes the code is requested and loaded. JavaScript allows Web developers to operate on the document object model (DOM), setting and retrieving values for just about any item that is part of a Web page, including complex objects such as table and combo box values. JavaScript allows Web developers to program dynamic Web pages that don't require a page refresh or a server request.

Things You'll Need

  • Text editor
  • Web browser with JavaScript enabled
  • Open a text editor and create a new file named getComboBox.html. Add some HTML code to getComboBox.html and include a <head> and a <body> section. Save getComboBox.html.

    <html>

    <head></head>

    <body></body>

    </html>

  • Add an HTML <form> tag to the file's <body> section. Name the form comboBoxForm and set the size attribute to 1.

    <html>

    <head>

    </head>

    <body>

    <form name="comboBoxForm" size="1">

    </form>

    </body>

    </html>

  • Add an HTML <select> tag between the <form> and </form> tags. Name the select menu comboBoxMenu and add three HTML <option> tags. Set the first <option> tag's text value to one, set the value attribute to 1 and close the </option> tag. Set the second tag's text value to two, set the value attribute to 2 and close the </option> tag. Set the third tag's text value to three, set the value attribute to three and close the </option> tag. Close the </select> menu tag.

    <html>

    <head></head>

    <body>

    <form name="comboBoxForm" size="1">

    <select name="comboBoxMenu">

    <option value="1">one</option>

    <option value="2">two</option>

    <option value="3">three</option>

    </select>

    </form>

    </body>

    </html>

  • Type a JavaScript open <script> tag and place it between the <head> and </head> tags. Set the <script> tag's type value to text/javascript and close the </script> tag.

    <html>

    <head>

    <script type="text/javascript">

    </script>

    </head>

    <body>

    <form name="comboBoxForm" size="1">

    <select name="comboBoxMenu">

    <option value="1">one</option>

    <option value="2">two</option>

    <option value="3">three</option>

    </select>

    </form>

    </body>

    </html>

  • Add a JavaScript function to file's <script> section. Name the function getComboBox().

    <html>

    <head>

    <script type="text/javascript">

    function getComboBox()

    {

    }

    </script>

    </head>

    <body>

    <form name="comboBoxForm" size="1">

    <select name="comboBoxMenu">

    <option value="1">one</option>

    <option value="2">two</option>

    <option value="3">three</option>

    </select>

    </form>

    </body>

    </html>

  • Type a JavaScript command that uses the document object to read the value of the combo box menu value and writes the value to a <span> tag that has the ID comboSpan.

    <html>

    <head>

    <script type="text/javascript">

    function getComboBox()

    {

    selectedValue = document.comboBoxForm.comboBoxMenu.value;

    document.getElementById("comboSpan").innerHTML = selectedValue;

    }

    </script>

    </head>

    <body>

    <form name="comboBoxForm" size="1">

    <select name="comboBoxMenu">

    <option value="1">one</option>

    <option value="2">two</option>

    <option value="3">three</option>

    </select>

    </form>

    </body>

    </html>

  • Add a <p> tag inside the HTML "<body>" tag. Enter some text that displays the message "The value of the combo box is: " and close the <p> tag. Include a space after the colon to separate the text from the dynamic value.

    <html>

    <head>

    <script type="text/javascript">

    function getComboBox()

    {

    selectedValue = document.comboBoxForm.comboBoxMenu.value;

    document.getElementById("comboSpan").innerHTML = selectedValue;

    }

    </script>

    </head>

    <body>

    <form name="comboBoxForm" size="1">

    <select name="comboBoxMenu">

    <option value="1">one</option>

    <option value="2">two</option>

    <option value="3">three</option>

    </select>

    </form>

    <p>The value of the combo box is: </p>

    </body>

    </html>

  • Add an HTML <span> tag to the <p> tag and assign the tag the id value comboSpan. Close the </span> tag.

    <html>

    <head>

    <script type="text/javascript">

    function getComboBox()

    {

    selectedValue = document.comboBoxForm.comboBoxMenu.value;

    document.getElementById("comboSpan").innerHTML = selectedValue;

    }

    </script>

    </head>

    <body>

    <form name="comboBoxForm" size="1">

    <select name="comboBoxMenu">

    <option value="1">one</option>

    <option value="2">two</option>

    <option value="3">three</option>

    </select>

    </form>

    <p>The value of the combo box is: <span id="comboSpan"></span></p>

    </body>

    </html>

  • Add an HTML <button> tag to the file that has the title "Click to display the combo box value". Add an onclick() event to the button that calls the getComboBox() function and close the </button> tag.

    <html>

    <head>

    <script type="text/javascript">

    function getComboBox()

    {

    selectedValue = document.comboBoxForm.comboBoxMenu.value;

    document.getElementById("comboSpan").innerHTML = selectedValue;

    }

    </script>

    </head>

    <body>

    <form name="comboBoxForm" size="1">

    <select name="comboBoxMenu">

    <option value="1">one</option>

    <option value="2">two</option>

    <option value="3">three</option>

    </select>

    </form>

    <p>The value of the combo box is: <span id="comboSpan"></span></p>

    <button onclick="getComboBox()">Click to display the combo box value</button>

    </body>

    </html>

  • Open getComboBox.html in a Web browser. Click the button titled "Click to display the combo box value" and verify that the text in the comboSpan <span> tag shows the value selected from the comboBoxMenu combo box.

Tips & Warnings

  • Combo boxes are typically used to retrieve user input for form submission. The data is typically passed with the form to a server-side script that handles the response.
  • The term "combo box" refers to a structure that allows a user to either make a specific selection or type his own selection if he does not choose one of the offered alternatives. A text field may be used to provide an input option for users.
  • Combo boxes are typically used to retrieve user input. Be sure to label the combo box clearly so that the user understands the question to which she is responding.
  • The "selected" option can be used with the <select> tag to set the item in the combo box that is selected by default.
  • When improperly handled, the innerHTML property can cause security problems.

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!