Javascript 如何在JS中创建采购订单表单
我是这个论坛的新手，也是JS的新手。我正在尝试为我正在创建的网站制作采购订单表单。基本上，我需要它添加我选择的项目总数，然后发送订单。然而，我得到了各种各样的错误。第一个是当我通过JS lint运行JS时，第二个是在代码的第111行显示错误。此外，每一个下拉值都显示为“未定义”，它不计算总数。再说一次，我对JavaScript非常陌生，所以我不确定如何着手解决这个问题，以便让它正常工作。任何建议或帮助都会很好！这是密码Javascript 如何在JS中创建采购订单表单,javascript,forms,Javascript,Forms,我是这个论坛的新手，也是JS的新手。我正在尝试为我正在创建的网站制作采购订单表单。基本上，我需要它添加我选择的项目总数，然后发送订单。然而，我得到了各种各样的错误。第一个是当我通过JS lint运行JS时，第二个是在代码的第111行显示错误。此外，每一个下拉值都显示为“未定义”，它不计算总数。再说一次，我对JavaScript非常陌生，所以我不确定如何着手解决这个问题，以便让它正常工作。任何建议或帮助都会很好！这是密码 <!DOCTYPE HTML> <html> &l
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
<br/ >
<div align="center">
<img src="navBar.jpg" width="1257" height="96" alt="Navigation Bar" usemap="#navBar"
style="box-shadow: -20px -20px 15px #0099FF, 20px 20px 15px #00FF00" />
<map name="navBar" id="navBar">
<area shape="rect" coords="0,1,206,95" href="northAmerica.html" alt="Home Page" />
<area shape="rect" coords="244,0,568,95" href="worldMap.html" alt="Animal Map" />
<area shape="rect" coords="601,0,835,95" href="purchaseForm.html" alt="Store" />
<area shape="rect" coords="876,0,1256,95" href="zooSurvey.html" alt="Take a Survey!" />
</map>
</div>
<br/ >
<link rel="stylesheet" type="text/css" href="sheet.css" />
<meta content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="sheet.css">
<script type="text/javascript">
var souvenirs = [Tiger, bobcat, elephant, penguin];
var Tiger = document.getElementById("Tiger_price");
var Tigerprice = parseFloat(Tiger, 10);
var tigerNew = Tigerprice.value;
var bobcat = document.getElementById("bobcat_price");
var bobcatprice = parseFloat(bobcat, 10);
var bobcatNew = bobcatprice.value;
var elephant = document.getElementById("elephant_price");
var elephantprice = parseFloat(elephant, 10);
var elephantNew = elephantprice.value;
var penguin = document.getElementById("penguin_price");
var penguinprice = parseFloat(penguin, 10);
var penguinNew = penguinprice.value;
window.onerror = function(msg, url, linenumber) {
alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
return true;
};
function validate() {
var result = true;
var namefield = document.getElementById("yourname");
var nameerr = document.getElementById("nameerr");
var namefieldRE = /^[\w ]+$/;
var emailfield = document.getElementById("youremail");
var emailerr = document.getElementById("emailerr");
var emailfieldRE = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/ ;
if(!namefield.value.match(namefieldRE)){
nameerr.innerHTML = "Please fill in your name";
nameerr.style.color = "#ff0000";
result = false;
}
else{
nameerr.innerHTML = "";
result = true;
}
if(!emailfield.value.match(emailfieldRE)){
emailerr.innerHTML = "Please fill in your email";
emailerr.style.color = "#ff0000";
result = false;
}
else{
emailerr.innerHTML = "";
result = true;
}
return result;
}
function resetTotals() {
var total = 0.0;
for (souvenirs in souvenirs) {
var subtotal = souvenirs[souvenirs] + "_subtotal";
document.getElementById(subtotal).innerHTML = "0.00";
}
output = document.getElementById("finaltotal");
output.innerHTML = "0.00";
}
function doTotals() {
alert();
for (souvenirs in souvenirs) {
var tigerselectedvalue = document.souvenirsorderform.tiger_quantity.value;
var bobcatselectedvalue = document.souvenirsorderform.bobcat_quantity.value;
var elephantselectedvalue = document.souvenirsorderform.elephant_quantity.value;
var penguinselectedvalue = document.souvenirsorderform.penguin_quantity.value;
document.getElementByID(souvenirs[souvenirs] + "_subtotal") = (souvenirs[souvenirs] + "price") * (souvenirs[souvenirs] + "selectedvalue");
var subtotal = souvenirs[souvenirs] + "_subtotal";
document.getElementById(subtotal).innerHTML = "0.00";
}
output = document.getElementById("finaltotal");
output.innerHTML = total.toFixed(2);
}
if (document.getElementById) {
window.onload = setup;
}
function setup() {
var lastCol = document.getElementById("subtotal_header");
var theForm = document.getElementById("souvenirsorderform");
var amounts = document.getElementsByTagName("select");
for(var i = 0; i < amounts.length; i++){
amounts[i].onchange = doTotals;
}
theForm.onsubmit = "validate";
theForm.onreset = "resetTotals";
}
</script>
<title>ITS 110 Zoo: Gift Shop</title>
</head>
<body>
<div align="center">
<table>
<tr>
<td>
<img src="logoZoo.gif" width="280" height="224" alt="Home Page" usemap="#logoZoo" style="border:none" />
<map name="logoZoo" id="logoZoo">
<area shape="circle" coords="141,114,120" href="northAmerica.html" alt="Home Page" />
</map>
</td>
<td>
<h1>Purchase </h1>
</td>
<td>
<h1>some </h1>
</td>
<td>
<h1>souvenirs!</h1>
</td>
</tr>
</table>
<div>
<p><b>Don't leave our site without getting your very own ITS110 Zoo souvenirs!
<br/ >
Once you've placed your order, we'll ship your items to the zoo so they're ready when you come for a visit- or we will
send it directly to your home! </b></p>
<br/ >
<h2 style="font-size:24Pt"><b>Place your order:</b></h2>
<form method="post" action="#" name="souvenirsorderform" id="souvenirsorderform" onsubmit="returnvalidate()">
<table>
<tr>
<td><label for="Tiger_quantity"><b>Tiger Plush</b></label></td>
<td><img src="tigerplush.gif" width="200" height="200"/></img></td>
<td>$3<input type="hidden" id="Tiger_price" value="3.00"><br/ >
<select id="Tiger_quantity" name="Tiger_quantity" size="1">
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="Tiger_subtotal"></td>
<td><label for="bobcat_quantity"><b>Monkey Plush</b></label></td>
<td><img src="monkey.gif" width="200" height="200"/></img></td>
<td>$3.50<input type="hidden" id="bobcat_price" value="3.50">
<select id="bobcat_quantity" name="bobcat_quantity" size="1"><br/ >
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="bobcat_subtotal"></td>
</tr>
<tr>
<td><label for="Elephant_quantity"><b>Elephant Shirt</b></label></td>
<td><img src="shirt.gif" width="200" height="200"/></img></td>
<td>$12<input type="hidden" id="elephant_price" value="12.00">
<select id="elephant_quantity" name="elephant_quantity" size="1"><br/ >
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="elephant_subtotal"></td>
<td><label for="penguin_quantity"><b>Penguin Shirt</b></label></td>
<td><img src="penshirt.gif" width="200" height="200" /></img></td>
<td>$12<input type="hidden" id="penguin_price" value="12.00"><br/ >
<select id="penguin_quantity" name="penguin_quantity" size="1">
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="penguin_subtotal"></td>
</tr>
<tr id="tablefoot"><td>Total:</td><td colspan="2" id="totalerr"><td id="finaltotal"></td></tr>
</table>
<p><b><label for="yourname">Your Full Name:</label>
<input name="yourname" id="yourname" type="text">
<span id="nameerr"></span></b></p>
<p><b><label for="youremail">Your E-Mail Address to Confirm the Order:</label>
<input name="youremail" id="youremail" type="text">
<span id="emailerr"></span></b></p>
<div><button id="submit" type="submit">Place Order</button><button id="reset" type="reset">Clear Order</button></div>
<br/ >
</form>
</body>
</center>
var纪念品=[老虎、山猫、大象、企鹅]；
var Tiger=document.getElementById（“Tiger_价格”）；
var Tigerprice=parseFloat（Tiger，10）；
var tigerNew=Tigerprice.value；
var bobcat=document.getElementById（“bobcat_价格”）；
var bobcatprice=parseFloat（bobcat，10）；
var bobcatNew=bobcatprice.value；
var大象=document.getElementById（“大象价格”）；
var elephantprice=parseFloat（大象，10）；
var elephantNew=elephantprice.value；
var penguin=document.getElementById（“企鹅价格”）；
var penguinprice=parseFloat（penguin，10）；
var penguinNew=penguinprice.value；
window.onerror=函数（消息、url、行号）{
警报（'Error message:'+msg+'\nURL:'+url+'\n行号：'+linenumber'）；
返回true；
};
函数验证（）{
var结果=真；
var namefield=document.getElementById（“yourname”）；
var nameerr=document.getElementById（“nameerr”）；
变量namefieldRE=/^[\w]+$/；
var emailfield=document.getElementById（“您的电子邮件”）；
var emailerr=document.getElementById（“emailerr”）；
var emailfieldRE=/^[\w\-\.\+]+\@[a-zA-Z0-9\.-]+\.[a-zA-Z0-9]{2,4}$/；
如果（！namefield.value.match（namefieldRE））{
nameerr.innerHTML=“请填写您的姓名”；
nameerr.style.color=“#ff0000”；
结果=假；
}
否则{
nameerr.innerHTML=“”；
结果=真；
}
如果（！emailfield.value.match（emailfieldRE））{
emailerr.innerHTML=“请填写您的电子邮件”；
emailerr.style.color=“#ff0000”；
结果=假；
}
否则{
emailerr.innerHTML=“”；
结果=真；
}
返回结果；
}
函数resetTotals（）{
风险价值总额=0.0；
用于（纪念品中的纪念品）{
var小计=纪念品[纪念品]+“_小计”；
document.getElementById（小计）.innerHTML=“0.00”；
}
输出=document.getElementById（“finaltotal”）；
output.innerHTML=“0.00”；
}
函数doTotals（）{
警惕（）；
用于（纪念品中的纪念品）{
var tigerselectedvalue=document.membertiesorderform.tiger\u quantity.value；
var bobcat selectedvalue=document.membertiesorderform.bobcat_quantity.value；
var elephantselectedvalue=document.membertiesorderform.elephantsequentity.value；
var penguin SelectedValue=document.membertiesorderform.penguin\u quantity.value；
document.getElementByID（纪念品[纪念品]+“_小计”）=（纪念品[纪念品]+“价格”）*（纪念品[纪念品]+“选定价值”）；
var小计=纪念品[纪念品]+“_小计”；
document.getElementById（小计）.innerHTML=“0.00”；
}
输出=document.getElementById（“finaltotal”）；
output.innerHTML=total.toFixed（2）；
}
if（document.getElementById）{
window.onload=设置；
}
函数设置（）{
var lastCol=document.getElementById（“小计”标题）；
var theForm=document.getElementById（“纪念品或表格”）；
var金额=document.getElementsByTagName（“选择”）；
对于（变量i=0；i
下订单：
老虎毛绒
$3
10
9
8.
7.
6.
5.
4.
3.
2.
1.
0
猴毛绒
$3.50
10
9
8.
7.
6.
5.
4.
3.
2.
1.
0
大象衬衫
$12
10
9
8.
7.
6.
5.
4.
3.
2.
1.
0
企鹅衬衫
$12
10
9
8.
7.
6.
5.
4.
3.
2.
1.
0
总数：
您的全名：
确认订单的电子邮件地址：
下单
alert（）您试图在触发DOM就绪事件之前找到DOM元素
var Tiger=document.getElementById（“Tiger_price”）
如果确实要执行此操作，请在触发document ready事件时执行此操作
并且始终尝试使用小写字母表示html元素属性。例如：id=“tiger\u subtotal”
我希望这能有所帮助。我检查过了，它正在工作：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
<br/ >
<div align="center">
<img src="navBar.jpg" width="1257" height="96" alt="Navigation Bar" usemap="#navBar"
style="box-shadow: -20px -20px 15px #0099FF, 20px 20px 15px #00FF00" />
<map name="navBar" id="navBar">
<area shape="rect" coords="0,1,206,95" href="northAmerica.html" alt="Home Page" />
<area shape="rect" coords="244,0,568,95" href="worldMap.html" alt="Animal Map" />
<area shape="rect" coords="601,0,835,95" href="purchaseForm.html" alt="Store" />
<area shape="rect" coords="876,0,1256,95" href="zooSurvey.html" alt="Take a Survey!" />
</map>
</div>
<br/ >
<link rel="stylesheet" type="text/css" href="sheet.css" />
<meta content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="sheet.css">
<script type="text/javascript">
window.onerror = function(msg, url, linenumber) {
alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
return true;
};
function validate() {
var result = true;
var namefield = document.getElementById("yourname");
var nameerr = document.getElementById("nameerr");
var namefieldRE = /^[\w ]+$/;
var emailfield = document.getElementById("youremail");
var emailerr = document.getElementById("emailerr");
var emailfieldRE = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/ ;
if(!namefield.value.match(namefieldRE)){
nameerr.innerHTML = "Please fill in your name";
nameerr.style.color = "#ff0000";
result = false;
} else{
nameerr.innerHTML = "";
result = true;
}
if (!emailfield.value.match(emailfieldRE)){
emailerr.innerHTML = "Please fill in your email";
emailerr.style.color = "#ff0000";
result = false;
} else{
emailerr.innerHTML = "";
result = true;
}
return result;
}
function doTotals() {
var animals = ['Tiger_', 'bobcat_', 'elephant_', 'penguin_'];
var priceStr = 'price';
var quantityStr = 'quantity';
var subtotalStr = 'subtotal';
var total = 0;
for (var i = 0; i < animals.length; i++) {
var price = document.getElementById(animals[i] + priceStr).value;
var quantity = document.getElementById(animals[i] + quantityStr).value;
document.getElementById(animals[i] + subtotalStr)
.innerHTML = parseInt(price) * parseInt(quantity);
total += price * quantity;
}
document.getElementById("finaltotal").innerHTML = total;
}
function setup() {
var lastCol = document.getElementById("subtotal_header");
var theForm = document.getElementById("souvenirsorderform");
var amounts = document.getElementsByTagName("select");
for(var i = 0; i < amounts.length; i++){
amounts[i].onchange = doTotals;
}
theForm.onsubmit = validate;
}
window.onload = setup;
</script>
<title>ITS 110 Zoo: Gift Shop</title>
</head>
<body>
<div align="center">
<table>
<tr>
<td>
<img src="logoZoo.gif" width="280" height="224" alt="Home Page" usemap="#logoZoo" style="border:none" />
<map name="logoZoo" id="logoZoo">
<area shape="circle" coords="141,114,120" href="northAmerica.html" alt="Home Page" />
</map>
</td>
<td>
<h1>Purchase </h1>
</td>
<td>
<h1>some </h1>
</td>
<td>
<h1>souvenirs!</h1>
</td>
</tr>
</table>
<div>
<p><b>Don't leave our site without getting your very own ITS110 Zoo souvenirs!
<br/ >
Once you've placed your order, we'll ship your items to the zoo so they're ready when you come for a visit- or we will
send it directly to your home! </b></p>
<br/ >
<h2 style="font-size:24Pt"><b>Place your order:</b></h2>
<form method="post" action="#" name="souvenirsorderform" id="souvenirsorderform" onsubmit="return validate()">
<table>
<tr>
<td><label for="Tiger_quantity"><b>Tiger Plush</b></label></td>
<td><img src="tigerplush.gif" width="200" height="200"/></img></td>
<td>$3<input type="hidden" id="Tiger_price" value="3.00"><br/>
<select id="Tiger_quantity" name="Tiger_quantity" size="1">
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="Tiger_subtotal"></td>
<td><label for="bobcat_quantity"><b>Monkey Plush</b></label></td>
<td><img src="monkey.gif" width="200" height="200"/></img></td>
<td>$3.50<input type="hidden" id="bobcat_price" value="3.50">
<select id="bobcat_quantity" name="bobcat_quantity" size="1"><br/ >
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="bobcat_subtotal"></td>
</tr>
<tr>
<td><label for="Elephant_quantity"><b>Elephant Shirt</b></label></td>
<td><img src="shirt.gif" width="200" height="200"/></img></td>
<td>$12<input type="hidden" id="elephant_price" value="12.00">
<select id="elephant_quantity" name="elephant_quantity" size="1"><br/ >
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="elephant_subtotal"></td>
<td><label for="penguin_quantity"><b>Penguin Shirt</b></label></td>
<td><img src="penshirt.gif" width="200" height="200" /></img></td>
<td>$12<input type="hidden" id="penguin_price" value="12.00"><br/ >
<select id="penguin_quantity" name="penguin_quantity" size="1">
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="penguin_subtotal"></td>
</tr>
<tr id="tablefoot"><td>Total:</td><td colspan="2" id="totalerr"><td id="finaltotal"></td></tr>
</table>
<p><b><label for="yourname">Your Full Name:</label>
<input name="yourname" id="yourname" type="text">
<span id="nameerr"></span></b></p>
<p><b><label for="youremail">Your E-Mail Address to Confirm the Order:</label>
<input name="youremail" id="youremail" type="text">
<span id="emailerr"></span></b></p>
<div><input id="submit" type="submit" value="Place Order"/>
<input id="reset" type="reset" value="Clear Order"/>
<br/ >
</form>
</body>
</html>
window.onerror=函数（消息、url、行号）{
警报（'Error message:'+msg+'\nURL:'+url+'\n行号：'+linenumber'）；
返回true；
};
函数验证（）{
var结果=真；
var namefield=document.getElementById（“yourname”）；
var nameerr=document.getElementById（“nameerr”）；
变量namefieldRE=/^[\w]+$/；
var emailfield=document.getElementById（“您的电子邮件”）；
var emailerr=document.getElementById（“emailerr”）；
var emailfieldRE=/^[\w\-\.\+]+\@[a-zA-Z0-9\.-]+\.[a-zA-Z0-9]{2,4}$/；
如果（！namefield.value.match（namefieldRE））{
nameerr.innerHTML=“请填写您的姓名”；
nameerr.style.color=“#ff0000”；
结果=假；
}否则{
nameerr.innerHTML=“”；
结果=真；
}
如果（！emailfield.value.match（emailfieldRE））{
emailerr.innerHTML=“请填写您的电子邮件”；
emailerr.style.color=“#ff0000”；
结果=假；
}否则{
emailerr.innerHTML=“”；
结果=真；
}
返回结果；
}
函数doTotals（）{
动物变量=[‘老虎’，‘bobc