input field value to change upon selection of different dropdown menu options

Question

I am creating an order form, using HTML, where I need to add a dropdown menu for 'which color' and a corresponding input field, which will be read-only, for the 'amount'. Creating the order form is easy but now what I want is that I want the 'amount' value to change depending on which 'color' has been selected from the 'which color' dropdown menu. Lets say that we've five options inside the 'which color' dropdown menu, namely:

1. Black
2. White
3. Blue
4. Green
5. Orange

<select id="color">
     <option value="Black">Black</option>
     <option value="White">White</option>
     <option value="Blue">Blue</option>
     <option value="Green">Green</option>
     <option value="Orange">Orange</option>
</select>

And that each color has a corresponding amount set, for example:

1. Black = $100
2. White = $200
3. Blue = $300
4. Green = $400
5. Orange = $500

Now what I want is that I want the input field for 'amount' to show different values when different options of colors are selected from the dropdown. For example if the color 'blue' is selected, then the value '$300' should be shown in the read-only input field for amount and it should keep on changing depending on which option is selected.

I am presuming that this can be done using javascript but as I am fairly new to this, I am finding it a bit difficult. This is how the basic form would look:

<form action="#" method="post">

  <select id="color">
     <option value="Black">Black</option>
     <option value="White">White</option>
     <option value="Blue">Blue</option>
     <option value="Green">Green</option>
     <option value="Orange">Orange</option>   </select>

  <input name="amount" value="" readonly="readonly" onfocus="this.blur()" />

</form>

Looking forward to get a solution. Thanks.

Answer 1

This is a relatively simple solution, for up-to-date browsers, and should give you a starting point to work from:

function updatePrice (el, priceLog, priceList) {
    priceLog.value = '$' + priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
}

var colorPrices = {
    'black' : 100,
    'white' : 200,
    'blue' : 300,
    'green' : 400,
    'orange' : 500
};

var select = document.getElementById('color'),
    hidden = document.getElementsByName('amount')[0];

select.addEventListener('change', function(){
    updatePrice(select, hidden, colorPrices);
});

JS Fiddle demo.

• document.getElementById().
• document.getElementsByTagName().
• Element.addEventListener().
• selectedIndex.
• String.toLowerCase().

Answer 2

Try this :

<form action="#" method="post">
<select id="color" onchange="func()">
 <option value="Black">Black</option>
 <option value="White">White</option>
 <option value="Blue">Blue</option>
 <option value="Green">Green</option>
 <option value="Orange">Orange</option>   </select>
<input name="amount" id ="valu" value="" readonly="readonly" />
</form>

Javascript :

function func() {
    var option = document.getElementById("color").value;
    if (option =='Black')
    {
    $('#valu').val(100);
    }
        if (option =='White')
    {
    $('#valu').val(200);
    }
        if (option =='Blue')
    {
    $('#valu').val(300);
    }

        if (option =='Green')
    {
    $('#valu').val(400);
    }

        if (option =='Orange')
    {
    $('#valu').val(500);
    }


};

JSFiddle