Updating form values with javascript
This works, does anyone see anything I shouldn't be doing?
My function that is called
function getWeight(){
var weight;
var quantity = document.dhform.quantity.value;
var cardSize = document.dhform.cardSize.value;
weight = quantity * cardSize;
document.rates.weight.value = weight;
}
takes values from these drop down menues
<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>
Value开发者_Python百科 needs to be inserted into this text box
<td style="width: 115px; height: 49px;"><span class="style16">Weight</span><br/>
<input type="text" id="weight" name="weight" size="10" maxlength="4"/>
</td>
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.
精彩评论