VIP会员
购物车
私信
发表新帖
立即签到
关注
回复
支持(
反对(
首页上一页 1 下一页尾页 2 条记录 1/1页
为什么我的Button不能运行方程
发表在JavaScript答疑区
2020-04-13
是否精华
是
否
版块置顶:
是
否
<html>
<head>
<style>
body{margin:0px;}
#orderForm, #confirmForm{postion:absolute; width:280px; height:440px; margin:5px; display:inline-block; padding:5px;}
#orderForm{background-color:#abc; display:inline-block;}
#confirmForm{position:absolute; background-color:#def; }
#bttn{position:absolute; bottom:15px;}
#msg{color:F23; font-weight:bold;}
</style>
</head>
<body>
<div id="orderForm">
<h3>Stationery Order</h3>
<h5>Please complete the form</h5>
<p><input type="text" id="firstName" placeholder="Enter Your First Name" /></p>
<p><input type="text" id="familyName" placeholder="Enter Your Famiy Name" /></p>
<p>Select Title</p>
<input type="radio" name="citizen" value="cn" checked />Chinese Style
<input type="radio" name="citizen" value="wn" />Western Style
<p>
<input type="radio" name="titles" value="Prof." />Prof.
<input type="radio" name="titles" value="Dr." />Dr.
<input type="radio" name="titles" value="Mr." />Mr.
<input type="radio" name="titles" value="Ms." />Ms.</p>
<input type="checkbox" id="otherChk" name="other" />other
<input type="text" id="otherTitle" placeholder="Enter Your Title" />
<br><br>
<input type="checkbox" id="pen" name="orders" value="Pen" />Pen
<input type="checkbox" id="ruler" name="orders" value="Ruler" />Ruler<br>
<input type="checkbox" id="notepad" name="orders" value="Notepad" />Notepad
<input type="checkbox" id="clips" name="orders" value="Paper Clips" />Paper Clips<br>
<input type="checkbox" id="stapler" name="orders" value="Stapler" />Stapler
<input type="checkbox" id="paper" name="orders" value="Paper(A4" />Paper(A4)
<p><button id="orderBtn" onclick="Order()">Order</button></p>
<p id="msg"></p>
</div ><!-- id="orderForm" -->
<div id="confirmForm">
<div id="printTitle"></div>
<div id="printOrder"></div>
<p id ="bttn">
<button id="confirmBtn" onclick="Confirm()" disabled >Confirm Order</button>
<button id="cancelBtn" onclick="Cancel()">Cancel Order</button></p>
</div ><!-- id="confirmForm" -->
<script>
function Order(){
var FIN=document.getElementById("firstName").value;
var FAN=document.getElementById("familyName").value;
var ST=document.getElementsByName("citizen");
for(i=0;i<ST.length;i++){
if(ST[i].checked==true){
var st=ST[i].value;
}
}
var TT=document.getElementsByName("titles");
var tt=[]
for(i=0;i<TT.length;i++){
if(TT[i].checked==true){
tt.push(TT[i].value);
}
}
var OT=document.getElementsByName("other");
var ot=[]
for(i=0;i<OT.length;i++){
if(OT[i].checked==true){
ot.push(OT[i].value);
}
}
var othertitle=document.getElementById("otherTitle").value;
var OR=document.getElementsByName("orders");
var or=[]
for(i=0;i<OR.length;i++){
if(OR[i].checked==true){
or.push(OR[i].value);
}
}
if((FIN=""||FAN="")||(tt=""&&ot="")||or==""){
document.getElementById("printTitle").innerHTML+="Confirm Order"+<br>;
if(FIN=""||FAN=""){
document.getElementById("printTitle").innerHTML+="Please enter all your names"+<br>;
}
if(tt=""&&ot=""){
document.getElementById("printTitle").innerHTML+="Select a title or click the check box"+<br>;
}
if(or==""){
document.getElementById("printTitle").innerHTML+="Click at least one check box"+<br>;
}
}else{
document.getElementById("printTitle").innerHTML+="Confirm Order"+<br>;
document.getElementById("printTitle").innerHTML+="Please confirm the order"+<br>;
if(st=="cn"){
document.getElementById("printTitle").innerHTML+="Dear"+tt+FAN+FIN+<br>+"thank you for your order of";
for(i=0;i<or.length;i++){
document.getElementById("printOrder").innerHTML+=or[i]+<br>;
}
}
if(st=="wn"){
document.getElementById("printTitle").innerHTML+="Dear"+tt+FIN+FAN+<br>+"thank you for your order of";
for(i=0;i<or.length;i++){
document.getElementById("printOrder").innerHTML+=or[i]+<br>;
}
}
}
function Cancel(){
document.getElementById("printTitle").innerHTML="";
document.getElementById("printOrder").innerHTML="";
}
function Confirm(){
var FIN=document.getElementById("firstName").value;
alert("We are sending your order now"+FIN);
}
</script>
</body>
</html>
分享到：
