动态表单

最新推荐文章于 2024-10-14 16:33:38 发布

yangxiaojun9238

最新推荐文章于 2024-10-14 16:33:38 发布

阅读量497

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVASCRIPT学习笔记文章标签： input constants function variables each numbers

本文链接：https://blog.csdn.net/yangxiaojun9238/article/details/7319724

JAVASCRIPT学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的动态表单示例，该表单可以实时计算商品总价、税费及运费等，并展示了如何验证输入的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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