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\'. Cr

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