使用javascript更新表单值

时间:2010-04-30 14:55:49

标签: javascript html forms

这有效,有没有人看到我不应该做的任何事情?

我的函数叫做

function getWeight(){
        var weight;
        var quantity = document.dhform.quantity.value;
        var cardSize = document.dhform.cardSize.value;
            weight = quantity * cardSize; 
        document.rates.weight.value = weight;
    }

从这些下拉菜单中获取值

<td><span class="style29">Quantity</span><span class="style1"><br/>
                                <select id="Quantity" name="quantity" size="1">
                                    <option value="250">250</option>
                                    <option value="500">500</option>
                                    <option value="1000" selected>1000</option>
                                    <option value="1500">1500</option>
                                    <option value="2000">2000</option>
                                    <option value="2500">2500</option>
                                    <option value="3000">3000</option>
                                    <option value="4000">4000</option>
                                    <option value="5000">5000</option>
                                </select>
                            </span></td>
<td><p><span class="style1"><span class="style29">Size</span><br/>
                                      <select id="Size" name="Size" size="1" onChange="getWeight()">
                                        <option value="0.00999" selected>8.5 x 3.5</option>
                                        <option value="0.0146">11 x 4</option>
                                      </select>
                            </span></p></td>

需要将值插入此文本框

<td style="width: 115px; height: 49px;"><span class="style16">Weight</span><br/>
                                  <input type="text" id="weight" name="weight" size="10" maxlength="4"/>
                              </td>

1 个答案:

答案 0 :(得分:2)

是的,它是用Javascript完成的。假设“选择某事”部分是一个下拉列表(HTML选择框)。您向该选择框添加一个“onchange”事件处理程序,该选择框将触发一个javascript函数(它将自动将更改的选择框元素作为参数)。在该函数中,您可以使用选择框的值来确定您希望另一个框的值是什么,并更新其他框的值。

示例:

<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>

我要补充一点,如果你做了很多这样的事情,你应该研究一下jQuery,这会让这种事情变得更容易。

相关问题