动态表单
来源：互联网 发布：王牌特派员结局知乎 编辑：程序博客网 时间：2024/04/30 12:45
<html> <head> <title>Dynamic Form Demo</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <script type="text/javascript"> <!-- // Set up form variables and constants var widgetCost = 1.50; var gadgetCost = 2.70; var thingieCost = 1.25; var taxRate = 0.075; var shippingCost = 0; function isNumberInput(field, event) { var key, keyChar; if (window.event) key = window.event.keyCode; else if (event) key = event.which; else return true; // Check for special characters like backspace if (key == null || key == 0 || key == 8 || key == 13 || key == 27) return true; // Check to see if it.s a number keyChar = String.fromCharCode(key); if (/\d/.test(keyChar)) { window.status = ""; return true; } else { window.status = "Field accepts numbers only."; return false; } } function format(value) { // Format to have only two decimal digits var temp = Math.round(value * 100); temp = temp / 100; return temp; } function calc() { with (document.myform) { widgettotal.value = format(widgets.value * widgetCost); gadgettotal.value = format(gadgets.value * gadgetCost); thingietotal.value = format(thingies.value * thingieCost); subtotal.value = format(parseFloat(widgettotal.value) + parseFloat(gadgettotal.value) + parseFloat(thingietotal.value)); tax.value = format(subtotal.value * taxRate); for (i=0; i < shipping.length; i++) if (shipping[i].checked) shippingcost = parseFloat(shipping[i].value); grandtotal.value = format(parseFloat(subtotal.value) + parseFloat(tax.value) + shippingcost); } } //--> </script> </head> <body> <form id="myform" name="myform" action="#" method="get"> Widgets: <input type="text" name="widgets" id="widgets" size="2" value="0" onchange="calc();" onkeypress="return isNumberInput(this, event);" /> @ 1.50 each <input type="text" id="widgettotal" name="widgettotal" size="5" readonly="readonly" /> <br /> Gadgets: <input type="text" name="gadgets" id="gadgets" size="2" value="0" onchange="calc();" onkeypress="return isNumberInput(this, event);" /> @ 2.70 each <input type="text" id="gadgettotal" name="gadgettotal" size="5" readonly="readonly" /> <br /> Thingies: <input type="text" name="thingies" id="thingies" size="2" value="0" onchange="calc();" onkeypress="return isNumberInput(this, event);" /> @ 1.25 each <input type="text" id="thingietotal" name="thingietotal" size="5" readonly="readonly" /> <br /><br /><br /> <em>Subtotal:</em> <input type="text" id="subtotal" name="subtotal" size="8" value="0" readonly="readonly" /> <br /><br /><br /> <em>Tax:</em> <input type="text" id="tax" name="tax" size="5" value="0" readonly="readonly" /> <br /><br /><br /> <em>Shipping:</em> Next day: <input type="radio" value="12.00" name="shipping" id="shipping" checked="true" onclick="calc();" /> 2-day: <input type="radio" value="7.00" name="shipping" id="shipping" onclick="calc();" /> Standard: <input type="radio" value="3.00" name="shipping" id="shipping" onclick="calc();" /> <br /><br /><br /> <strong>Grand Total:</strong> <input type="text" id="grandtotal" name="grandtotal" size="8" readonly="readonly" /> </form> </body> </html>
