How to use an input from a select option in html with javascript?

Question

I want to assign a drop down option to a unique ID so that when it is selected, the javascript will take that ID and turn it into a variable which I can use to display the cost.

This is what I have so far:

<form>
        <select>
        <option name ="Bristol "value="40.0" id="BN1">Bristol - Newcastle</option>
        </select>
        <button type="button" onclick="BookingFare(); return false;">Submit</button><br>
        </form>

function BookingFare() { 


            var price = 0;
            //var ofAdults = document.getElementById('adults').value;
            //var ofChildren = document.getElementById('children').value;
            var BN1 = document.getElementById('BN1').value;

            if (BN1) {
             var price = price + 40; 
            }

            document.getElementById('priceBox').innerHTML = price;

            }

I can't get it to display the price, even when I just try to get it to print out "hello" when BN1 is selected it doesn't work. Can anyone tell me what I'm missing?

Are you sure you have an element with the id of priceBox?

KJ Price
– KJ Price

2015-03-04 18:32:03 +00:00
Commented Mar 4, 2015 at 18:32 — KJ Price
– KJ Price, Commented Mar 4, 2015 at 18:32
yes sorry just didnt show it in html code

alexyz
– alexyz

2015-03-04 18:49:05 +00:00
Commented Mar 4, 2015 at 18:49 — alexyz
– alexyz, Commented Mar 4, 2015 at 18:49

Tushar Gupta · Accepted Answer · 2015-03-04 18:32:45Z

1

function BookingFare() { 


            var price = 0;
            //var ofAdults = getElementById('adults').value;
            //var ofChildren = getElementById('children').value;
            var BN1 = document.getElementById('BN1').value;

            if (BN1) {
             var price = price + 40; 
            }

            document.getElementById('priceBox').innerHTML = price;

            }

<form>
        <select id="BN1">
        <option name ="Bristol "value="40.0" >Bristol - Newcastle</option>
        </select>
        <button type="button" onclick="BookingFare(); return false;">Submit</button><br>
        </form>

<label id='priceBox'></label>

answered Mar 4, 2015 at 18:32

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Endre Both Over a year ago

Assuming you have more than just one route in the select, you probably want price = BN1; in the if block, otherwise why bother specifying the price in the option elements.

Tushar Gupta Over a year ago

Yeah just copied what the OP stated.. It's his discretion now

alexyz Over a year ago

Okay yep i have noticed when i add more options in this way is no good i am sorry about that, i have done your way now price = BN1 in if statements but all it does is take the if statement at the bottom and use that price for whatever i use. Any suggestions?

Collectives™ on Stack Overflow

How to use an input from a select option in html with javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related