Exercise 03
Write a web page file, use a form for users to fill out purchase orders. Fill in the information, including name, telephone number, product name, price, quantity and amount. When submitting a form, requirements:
(1) Product name and unit price can only let the user choose;
(2) in an amount of not submitted 0;
(3) amount calculated automatically at the time of filing, and compared with the filled in "Amount";
(4) (2), (3) when there is an error, the return has to fill purchase orders, and an error location and the cause; if there is no error, the page has been successfully submitted returns.
result:
Fill out the form interface:
Submitted successfully interface:
Error prompt:
Code:
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购货订单</title>
<script src="check.js"></script>
<style type="text/css">
.divForm{
position: absolute;/*绝对定位*/
width: 350px;
height: 500px;
border: 0;
text-align: center;/*(让div中的内容居中)*/
top: 30%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="divForm">
<span style="font-size: xx-large; color: orange; ">
<h1 align=center>购货订单表</h1>
</span>
<span style="font-size: large;align-content: center">
<form name="table";>
请输入姓名:       
<input type="text" name="name" id="name">
<br/><br/>
请填写电话号：
<input type="text" name="phone" id="phone">
<br/><br/>
请填写数量：    
<input type="text" name="number" id="count">
<br/><br/>
请填写金额：    
<input type="text" name="money" id="total">
<br/><br/>
请填写商品名称：
<span style="font-size: large;">
<select name="selects" size=4>
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
<option value="watermelon">西瓜</option>
<option value="pear">梨子</option>
</select>
</span>
<br/><br/>
请填写单价：
<input type="radio" name="price" value="sing">1元/斤
<input type="radio" name="price" value="sport">2元/斤
<input type="radio" name="price" value="travel">3元/斤
<br/><br/><br/>
<input type="button" value="提交" οnclick="check()">
</form>
</span>
</div>
</body>
</html>
check.js
function check(){
const count = document.getElementById("count");
var b;
if(count.value==0||count.value==""){
alert("填写数量行出错，数量不能为空");
b=false;
}
var total = document.getElementById("total");
var price=document.getElementsByName("price");
var single;
if(price!=null){
// alert("test");
var i;
for(i=0;i<price.length;i++){
if(price[i].checked){
// alert("dasdhasdhashd");
// alert("#"+i);
single=i+1;
}
}
}
// alert(total.value+"---"+count.value);
if((total.value)==(count.value)*single){
b=true;
} else{
alert("数量和单价乘积不等于所填金额，请重新填写!");
b=false;
}
if(b==true)
{
window.location.href="success.html";
}
}success.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>信息提交成功！</h1>
</body>
</html>
