验证一个表单。

    这是五号那天写的,忘发了。

    例子都是《Head First Javascript》里的,我看一章内容就过一遍代码。这章是要弄一个表单,让用户确认必需数据,计算税额跟订单总额然后提交。

验证一个表单。_第1张图片

<html>
	<head>
		<title> Duncan's Just-In-Time Donuts</title>
		<link rel="stylesheet" type="text/css" href="donuts.css">
		<script type="text/javascript">
	function updateOrder() {
        const TAXRATE = 0.0925;//常量:税率
        const DONUTPRICE = 0.50;//常量:甜甜圈价格
        var numCakeDonuts = parseInt(document.getElementById("cakedonuts").value);
        //parseInt()将文本转换为数字(整数),还有一个parseFloat转成浮点数
        var numGlazedDonuts = parseInt(document.getElementById("glazeddonuts").value);
        if (isNaN(numCakeDonuts))// 内置函数isNaN()确认值是否不为数值
          numCakeDonuts = 0;//ture则值不是数字,蛋糕甜甜圈数量为0
        if (isNaN(numGlazedDonuts))
          numGlazedDonuts = 0;
        var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE; //小计=甜甜圈数量*价格
        var tax = subTotal * TAXRATE; //税额=小计*税率
        var total = subTotal + tax; //总额=小计+税额
        document.getElementById("subtotal").value = "$" + subTotal.toFixed(2); 
        //toFixed()函数把金额四舍五入到小数点后两位
        document.getElementById("tax").value = "$" + tax.toFixed(2);
        document.getElementById("total").value = "$" + total.toFixed(2);
      }

      function placeOrder(form) { //提醒name和pickupmiuntes不能为空字符和不能为空字符或数字。
        if (document.getElementById("name").value == "")
        	alert("I'm sorry but you must provide your name before submitting an order.");
        else if (document.getElementById("pickupmiuntes").value =="" ||
      		isNaN(document.getElementById("pickupmiuntes").value))
      		alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order.")
        else
          // Submit the order to the server
          form.submit();
      }
		</script>
	</head>
	<body>
	<div id="frame">
		<div class="head">Duncan's Just-In-Time Donuts</div>
		<div class="header">All donuts 50 cents each,cake or glarzed!</div> <br/>
		<div id="IMG">
			<img  src="donuttime.png" alt="donuttime"><br/>
		</div>

		<form name="orderform" action="donuts.php" method="POST">
			<div class="field">
			Name:<input type="text" id="name" name="name" value="">
			</div> 
			<div class="field">
			# of cake donuts:<input type="text" id="cakedonuts" name="cakedonuts" value="" onchange="updateOrder();"> 
			</div>
			<div class="field">
			# of glazed donuts:<input type="text" id="glazeddonuts" name="glazeddounts" value="" onchange="updateOrder();"> 
			</div>
			<div class="field">
			Minutes'til pickup:<input typr="text" id="pickupmiuntes" name="pickupmiuntes" value="">
			</div>
			<div class="field">
			Subtotal:<input type="text" id="subtotal" name="subtotal" valye="" readonly="readonly">//只读
			</div>
			<div class="field">
			Tax:<input type="text" id="tax" name="tax" value="" readonly="readonly">
			</div>
			<div class="field">
			Total:<input type="text" id="total" name="total" value="" readonly="readonly">
			</div></br>
			<div class="field">
			<input type="button" value="Place Order" onclick="placeOrder(this.form);">
			</div>

		</form>
	</div>
	</body>
</html>


donuts.css 文件:

body{
	font:14px,arial;
	text-align:center;
}

#frame{
	width:500px;
	height:350px;
	border:solid;
 	border-width:1px;
}

#IMG{
	float:left;
	padding-top:50px;
	width:150px;
	
}


div.head{
	margin:10px,20px;
	font:20px,arial;
	font-weight:bold;

}

div.header{
	margin:0,20px;
	font:15px,arial;
	font-style:italic;
}

div.field{
	text-align:right;
	margin-right:20px;
}


你可能感兴趣的:(验证一个表单。)