文档章节

验证一个表单。

蒙懵懵
 蒙懵懵
发布于 2015/12/07 13:55
字数 537
阅读 88
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

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

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

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


蒙懵懵
粉丝 4
博文 14
码字总数 8417
作品 0
深圳
私信 提问
加载中
请先登录后再评论。
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
数据库表单生成器--SQLScreens

SQLScreens 是一个使用 Tcl/TK 编写的简单关系型数据库表单生成工具。可让你快速创建查询界面,并指定相应的表和字段。支持多种数据库,包括:MySQL, SQLite, and INFORMIX, and ODBC for o...

匿名
2013/02/17
931
0
响应式框架--Groundwork

GroundworkCSS 是一个基于 Sass 预处理器的开源项目 ,主要用于快速构建响应式 Web 应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。 Groundwork 还提供多种 ...

匿名
2013/02/25
2.8W
4
自定义表单系统--FormDesign

是基于 FLEX 开发的一款B/S的自定义表单系统 整个过程如下: 1、通过FormDesign自定义表单画出相应的表单; 2、将生成好的XML放到程序中,并通过后台自动编译成JSP; 注:FormDesing只是自定...

polliwog
2013/03/29
1.6W
1
iOS 的 Canvas 和 Audio 实现--Ejecta

Ejecta 是一个快速开源的 JavaScript、Canvas 和 音频实现,适用于 iOS 平台。你可以把它想象成一个只支持显示 Canvas 元素的浏览器,它像一个浏览器却无需浏览器,适用于游戏和动画开发。无...

匿名
2012/10/26
4.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

箭头翻转效果

vue实现点击箭头的旋转动画(收起展开)效果 https://blog.csdn.net/Rampage_w/article/details/106496646?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_ra......

花乐天
9分钟前
0
0
预告 | 一场解决SSL/TLS证书困局的硬核发布会

大数据时代,信息安全威胁日益严峻,国内国际(等保2.0 、密码法、GDPR等)法规的出台,使得数据安全和隐私保护愈加被高度重视, SSL 证书作为互联网的安全标签,需求量日益增加,已然成为企...

osc_q5m9dzk0
9分钟前
0
0
提高数据处理效率的excel小技巧(一)

转自:求知鸟 作者:求知鸟 这是一个技巧贴,直接上干货: 1、你想在excel中看到函数值是如何计算出来的? Ctrl+~:进入函数视图 2、去除重复值方式有哪些? a、数据—数据工具—删除重复值(...

朱小五
昨天
0
0
全网疯传,50个精选BAT等大厂大数据、算法落地经验,白拿不谢!

话不多说,直接上干货资料,我们精选了50个百度、腾讯、阿里等大厂的大数据、算法落地经验,分享给大家: 识别二维码,回复"大厂经验",获取PDF干货合集! 合集目录: 识别二维码,回复"大厂...

BBuf
今天
8
0
小白写论文 | 技术性论文结构剖析

【前言】:公众号的AI初学者交流群已经建立啦,公众号后台回复【加群】可以加入。群里都是些一起学习的朋友,大家学习路上,结个伴。 【公众号资源汇总】:炼丹图书馆 | AI初学者所需要的资料...

机器学习炼丹术
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部