javascript - 如何在 JS 中创建采购订单表单

Question

我是这个论坛的新手，也是 JS 的新手。我正在尝试为我正在创建的网站制作采购订单。基本上我需要它来添加我选择的项目的总数，然后发送订单。但是，我收到各种错误。第一个是当我通过 JS lint 运行 JS 时，第二个是在我的代码的第 111 行显示错误。此外，每个下拉值都显示为“未定义”，它不计算总数。再说一次，我对 JavaScript 很陌生，所以我不确定如何解决这个问题，这样我才能让它工作。任何建议或帮助都会很棒！这是代码

<!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&nbsp;</h1>
</td>
<td>
<h1>some&nbsp;</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>

score 1 · Accepted Answer

您不需要自己重置表格。<input id="reset" type="reset" value="Clear Order"/>为你做。如果你打电话alert()，它显示未定义（这是正常的）。
您试图在 DOM 就绪事件触发之前找到 DOM 元素。
var Tiger = document.getElementById("Tiger_price");
如果您真的想这样做，请在触发文档就绪事件时进行。
并且总是尝试使用小写字母作为 html 元素的属性。例如：id="tiger_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&nbsp;</h1>
</td>
<td>
<h1>some&nbsp;</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>

javascript - 如何在 JS 中创建采购订单表单

1 回答 1

Related

Reference