I need to be able to read from a dropdown box on a page

Question

0

Asked: June 1, 20262026-06-01T00:08:25+00:00 2026-06-01T00:08:25+00:00

I need to be able to read from a dropdown box on a page

0

I need to be able to read from a dropdown box on a page get the value from it and thats it (for now) I currently have this code.

JavaScript

function main(input)
{
    value = getValue();
    alert(value);
}

function getValue()
{
    var len = document.form1.values.length
    var chosen = ""

    for (var i = 0; i < len; i++) {
        if (document.form1.values[i].selected) {
            chosen = document.form1.values[i].value
        } 
    }

return chosen;
}

HTML

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Shopping Cart</title>
        <link href="style.css" title="Style" rel="stylesheet" type="text/css">
        <script src="javascript/js.js" type="text/javascript"></script>
    </head>

    <!-- Start content -->
    <body>
        <!-- Wrapper to hold all content in -->
        <div id="wrapper">
            <!-- Top header, site name, moto, all that -->
            <div id="header">
                <h1>Kyle's Legit Toys</h1>
                <h2>We are more legit then 10th.exe</h2>
                <h3>#SoundsLegit</h3>
            </div>

            <!-- Navigation Menu -->
            <div id="menu">
                <a href="#">Home</a>
                <a href="http://itsuite.it.brighton.ac.uk/ks339/sem2/clientValidation.htm">Client Validation</a>
            </div>

            <!-- Item -->
            <div class="first">
                <p>Wickedy Walker</p>
                <img src="i/car.jpg" width="85%" height="85%" alt="Car" title="#CoolCar">
                <p>Cost: £30 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Faster than light car</p>
                <img src="i/toycar.jpg" width="85%" height="85%" alt="ToyCar" title="#WickCar">
                <p>Cost: £10 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Build stuff crane</p>
                <img src="i/crane.jpg" width="85%" height="85%" alt="Toy Crane" title="#SweetCrane">
                <p>Cost: £15 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Dynamicaly altered payment -->
            <div id="payment">
                <p>Payment</p>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>

            <!-- Clear all floats -->
            <div class="clear">
            </div>

            <!-- Item -->
            <div class="first">
                <p>Satch Boogie</p>
                <img src="i/guitar.jpg" width="85%" height="85%" alt="Guitar" title="#BeLikeSlash">
                <p>Cost: £20 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>HaxTop</p>
                <img src="i/laptop.jpg" width="85%" height="85%" alt="Laptop" title="#Be1337hax">
                <p>Cost: £150 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Train</p>
                <img src="i/train.jpg" width="85%" height="85%" alt="Train" title="#ChoChoTrain">
                <p>Cost: £5 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Clear all floats -->
            <div class="clear">
            </div>

            <!-- Item -->
            <div class="first">
                <p>Pedo Bear</p>
                <img src="i/teddybear.gif" width="85%" height="85%" alt="Teddy Bear" title="#AwesomeTeddy">
                <p>Cost: £5 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Not a pony bear</p>
                <img src="i/bear.jpg" width="85%" height="85%" alt="Teddy Bear" title="#EnvyOfHomies">
                <p>Cost: £5 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Patobo Bear</p>
                <img src="i/irl.jpg" width="85%" height="85%" alt="Teddy Bear" title="#NotEvenRacist">
                <p>Cost: £5 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Clear all floats -->
            <div class="clear">
            </div>

            <!-- Final footer -->
            <div id="footer">
                <p>Kyle Strudwick - ks339 - StudentNumber</p>
                <p>Some copyright stuff</p>
            </div>
        </div>
    </body>
</html>

Error in chrome

The error I get in chrome

Firebug
Firebug
Firebug

Thanks a lot, when answering please try and explain what I did wrong, why it was wrong and the correct way.

Thanks

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-01T00:08:26+00:00

Change your HTML to this :

<select name="values" onchange="main(this)" >
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
</select>

and you function to this :

function main(input)
{
    var text = input.options[input.selectedIndex].text; // returns the text ie one / two etc
    var value = input.value; // returns the value ie 1 / 2 / 3 etc
}

What i have changed – I have updated the onchange from main() to main(this) this change means thats its passing the current select list object to the main funciton – this makes accessing the actual select list changing from the function a lot easier – you dont have to go searching the DOM for the select list that changed.

What does the javascript do – this simplifies the process of getting the selected option, now we are passed the actual select list that has changed ie input = the correct select list. We can use input.selectedIndex to get the currently selected option and input.value to return the currently selected value

Using document.forms1 wasnt working becuase you have multiple forms with the name form1 on your page – using document.forms1[#] where # is the index of the form would work but its confusing …

Further changes – you could remove all but one of the forms if you are using it exactly as you have in your question – as they really are doing nothing … just surround the entire page (just the content) with a single form – using the above method to get the changed value will still work as it doesn’t rely on the form !

Here is a quick example of the above working

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I need to be able to read from a dropdown box on a page

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply