Question

I want to add this functionality to my form. when a option from a dropdown menu is selected i want it to input the text field above with the corresponding info. For example:

<form name="form1" action="formhandler">

<input type="text" name="typecar">

<select name="BMWCars"> 
<option value="Sedan">Sedan</option> // when this option is chosen put string "5-series" in textfield above
<option value="Convertible">Convertible</option> // when this option is chosen put string "6-series" in textfield above
<option value="Truck">Truck</option> // when this option is chosen put string "X5" in textfield above
<option value="Coupe">Coupe</option> // when this option is chosen put string "3-series" in textfield above
<option value="Hatchback">Hatchback</option> // when this option is chosen put string "5-series GT" in textfield above
</select>

</form>

How can this be done with and without having to connect to the to get strings?

Answer 1

The code is tidier if you make your HTML conform to what you need.

http://jsfiddle.net/TgM2W/3/

<form name="form1" id="form1" action="formhandler">
    <input type="text" name="typecar" id="typecar">
    <select name="BMWCars" id="BMWCars"> 
        <option value="">Select one...</option>
        <option value="5-series">Sedan</option>
        <option value="6-series">Convertibles</option>
        <option value="X5">Truck</option>
        <option value="3-series">Coupe</option> 
        <option value="5-series GT">Hatchback</option>
    </select>
</form>

JavaScript (without jQuery):

window.onload = function() {
    document.forms['form1'].elements['BMWCars'].onchange = function() {
        var opts = this.options;
        document.forms['form1'].elements['typecar'].value = opts[opts.selectedIndex].value;
    };
};

or using jQuery:

$(document).ready(function() {
    $('#BMWCars').change(function() {
        var opts = $(this)[0].options;
        $('#typecar').val(opts[opts.selectedIndex].value);
    });
});

However, if you can’t change the HTML, just use an object to store the values and reference that:

objBMW = {
    "Sedan":"5-series",
    "Convertible":"6-series",
    "Truck":"X5",
    "Coupe":"3-series",
    "Hatchback":"5-series GT"
};

window.onload = function() {
    document.forms['form1'].elements['BMWCars'].onchange = changer;
};

function changer() {
    var opts = this.options;
    document.forms['form1'].elements['typecar'].value =objBMW[opts[opts.selectedIndex].value];
};