ansaurus

Question

Answer 1

+1 A:

Yes, it's done with Javascript. Let's say the "choose something" part is a drop-down (an HTML select box). You add an "onchange" event handler to that select box which fires a javascript function (which will automatically get the changed select box element as a parameter). Within that function, you use the value of the select box to determine what you want the value of the other box to be, and you update that other box's value.

Example:

<head>
<script language="JavaScript">
    function setToy(dropDown) {
        var pet = dropDown.options[dropDown.selectedIndex].value);
        var newBox = document.getElementById("toy");
        var toyText = "";
        switch(pet) {
           case "dog": toyText = "bone";
           case "cat": toyText = "mouse";
           default:toyText = "";
        }
        newBox.innerHTML = toyText;
    } 
</script></head>
<body>
<select name="petDropDown" onChange="updateToy(this)">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select><br />
Preferred Toy: <input id="toy" />
</body>

I'll add that if you do this stuff a lot, you should look into jQuery, which makes this kind of thing much easier.

JacobM 2010-04-30 14:59:54

Yes that is exactly what I am looking for.

shinjuo 2010-04-30 15:10:05

is newBox.innerHTML pointing towards the box I want to display it from?

shinjuo 2010-04-30 17:27:45

The idea is that newBox is the input box marked "Preferred Toy" -- it's the input box you want to update as a result of the change. InnerHTML allows you to replace the contents -- basically it replaces everything between the `<input id="toy">` and `</input>` tags.

JacobM 2010-04-30 18:47:25

ansaurus

tags:

views:

answers:

Updating form values with javascript

related questions