CODEWITHSUNDEEP
javascriptdrop-down-menu
Kyle93
Kyle93

Reputation: 795

JavaScript - Reading from dropdown box

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

Upvotes: 4

Views: 2664

Answers (2)

Manse
Manse

Reputation: 38147

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

Upvotes: 5

andyb
andyb

Reputation: 43823

All your forms have the name form1 so document.form1 actually returns an array of <form> elements. You can access them individually, for example document.form1[0].values for the first form. To maintain a generic function you need to pass the current select element (the one that the onchange event is fired from) into the function so that your function finds the correct form1 to operate on.

Upvotes: 1

Related Questions