XML课后练习答案(三)——JS编程小测验答案分享

题目:

编写一个网页文件,使用一个表单让用户填写购货订单。填写的信息包括姓名、电话、商品名称、单价、数量和金额。当提交表单时,要求:

(1)商品名称和单价只能让用户选择;

(2)数量为0时不予提交;

(3)金额在提交时自动计算,并与所填的"金额"比较;

(4)如(2)、(3)有错误时,则返回已填购货单,并提示错误位置和原因;如果没有错误,则返回已成功提交的页面。

提示:这个题目强烈建议自己上手,当时写作业随便在网上找了一个有很多错误的就交了,现在自己重新拿过来写一遍发现这个题目非常好,上手才发现有很多要注意的地方,这一篇是答案分享就只贴代码,下一篇博客会带着截图和注释详细解释,想进一步学习的小伙伴可以看我下一篇博客~~~

答案:(用到两个网页)

1、填写界面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购货订单</title>
<script language="javascript">
function result(){
var count=document.getElementById("count");
var b;
if(count.value==0||count.value==""){alert("填写数量行出错,数量不能为空");b=false;}
var total=document.getElementById("total");
var price=document.getElementsByName("spot");
for(var i=0;i<price.length;i++)
{
    if(price[i].checked==true)
    {
    var dan=5-i; 
    }    
}
if((total.value)==(count.value)*dan){b=true;}
else{alert("数量和单价乘积不等于所填金额,请重新填"); b=false;}
if(b==true)
{
    window.location.href="new.html";
}
}
</script>
</head>
<body>
<font size=8 color=blue>
<h1 align=center size=7>购货订单</h1>
</font>
<font size=5 color=red>
<form  name="biaodan" >
请输入姓名:
<input type="text" name="yourname" id="name">
<br/><br/>
请填写电话号:
<input type="text" name="yourphone" id="phone">
<br/><br/>
请填写数量:
<input type="text" name="yourhowmany" id="count">
<br/><br/>
请填写金额:
<input type="text" name="yourmoney" id="total">
<br/><br/>
请填写商品名称:
<font size=5 color=red>
<select name="selects" size=4>
<option value="apple">苹果</option>
<option value="pear">梨</option>
<option value="banada">香蕉</option>
<option value="xigua">西瓜</option>
<option value="mangguo">芒果</option>
</select>
</font>
<br/><br/>
请填写单价:
<input type="radio" name="spot" value="sing">5元/斤
<input type="radio" name="spot" value="sport">4元/斤
<input type="radio" name="spot" value="travel">3元/斤
<br/><br/><br/>
<input type="button" value="提交" onclick="result()">
</form>
</font>
</body>
</html>

2、订单提交成功界面(命名为new.html)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>信息提交成功!</h1>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_40996041/article/details/83444717
今日推荐