我无法让我的功能发挥作用。我已经标记了我的所有功能：
//This function validates the checkboxes:
// I am trying to use this function to validate checkboxes:
function checkCheckBoxes() {
if (theForm.dinner.checked == false) {
alert('You did not select a dish!');
return false;
} else {
return true;
}
}
//this funciton validates the quantity entered to be a number:
//I am trying to use this function to make sure the character they input in the quantity box is a number:
function checkForNumber(fieldValue) {
var numberCheck = isNan(fieldValue);
if (numbercheck == true) {
window.alert("You must enter a numeric value!");
return false;
} else {
return true;
}
}
// This function is supposed to ask the user to make sure they want to hit submit or reset:
//this function is to ask the user if they really want to submit the form or if they really want to reset the form:
function confirmSubmit() {
var submitForm = window.confirm('Are you sure you want to submit the form?');
if (submitForm == true)
return true;
return false;
}
function confirmReset() {
var resetForm = window.confirm('Are you sure you want to reset the form?');
if (resetForm == true)
return true;
return false;
}
//this function is used to validate the checkboxes:
function submitForm() {
var dinner = false;
for (var i = 0; i < 4; ++i) {
if (document.forms[0].dinner[i].checked == true) {
dinner = true;
break;
}
}
if (dinner == false) {
window.alert('You must select at least one dish.');
return dinner;
} else
return dinner;
}
// I am trying to calculate the price once they make a selection in checkboxes:
//this function calculates the price:
function sumOfCheckedBoxes() {
var total = 0;
var count = 0;
for (var i = 0; i < document.form[0].dinner.length; i++) {
if (document.form[0].dinner[i].checked) {
total = total + document.form[0].dinner[i].value * 1;
count++;
}
}
if (count == 1) {
alert("Your amount for the selcected dish is " + total);
} else if (count > 1) {
alert("The total of the " + count + "checkboxes you have checked is" + total);
}
}form {
background-color: #F4F4F4;
padding: 10px;
width: auto;
}
label {
float: left;
clear: left;
display: block;
width: 100px;
text-align: right;
padding-right: 10px;
margin-top: 10px;
}<form action="" onsubmit="return checkCheckboxes() && confirmSubmit()" onreset="return confirmReset();">
<fieldset>
<legend>Menu order form</legend>
<table>
<caption>
<h3>Dinner Menu</h3>
</caption>
<thead>
<tr>
<th>
<label for="dish">Dish
<br>
</label>
</th>
<th>
<label for="quantity">Quantity</label>
</th>
<th>
<label for="picture">Picture</label>
</th>
<th>
<label for="price">Price</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label for="choose">
<p><strong>Make a selection:</strong>
</p>
</label>
<br />
<label for="steak">
<input type="checkBox" id="tSteak" name="dinner" value="19.99" onsubmit="sumOfCheckedBoxes()" />Tuscan Steak</label>
</td>
<td>
<label for="quantity">
Quantity
<br />
<input type="text" name="steak" id="plate1" onblur="return checkForNumber(this.value);" />
</label>
</td>
<td>
<label for="img">
<img src="steak.jpg" alt="steak" id="steak">
<br />
</label>
<label for="comments">
Comments:
<textarea name="cm" cols="20" rows="2">How would you like your steak cooked?</textarea>
</label>
</td>
<td>
<label for="price">$19.99</label>
</td>
</tr>
<tr>
<td>
<br />
<label for="chicken">
<input type="checkBox" id="tChicken" name="dinner" value="13.99" onsubmit="sumOfCheckedBoxes()" />Tuscan Chicken</label>
</td>
<td>
<label for="quantity">Quantity
<br />
</quantity>
<input type="text" name="chicken" id="plate2" onblur="return checkForNumber(this.value);" />
</td>
<td>
<img src="grilledchicken.jpg" alt="chicken" id="chicken">
<br />Comments:
<textarea name="cm" cols="20" rows="2">Enter special instructions</textarea>
</td>
<td>
<label for="price">$13.99</label>
</td>
</tr>
<tr>
<td>
<br />
<label for="pasta">
<input type="checkBox" id="iPasta" name="dinner" value="12.99" onsubmit="sumOfCheckedBoxes()" />Sun Dried Pasta</label>
</td>
<td>
<label for="quantity">
Quantity
<br />
<input type="text" name="pasta" id="plate3" onblur="return checkForNumber(this.value);" />
</label>
</td>
<td>
<img src="sundriedpasta.jpg" alt="pasta" id="pasta">
<br />Comments:
<textarea name="cm" cols="20" rows="2">Enter special instructions</textarea>
</td>
<td>
<label for="price">$12.99</label>
</td>
</tr>
<tr>
<td>
<br />
<label for="rigatonni">
<input type="checkBox" id="iRigatonni" name="dinner" value="9.99" onsubmit="sumOfCheckedBoxes()" />Rigatonni</label>
</td>
<td>
<label for="quantity">
Quantity
<br />
<input type="text" name="rigatonni" id="plate4" onblur="return checkForNumber(this.value);" />
</label>
</td>
<td>
<img src="rigatonni.jpg" alt="rigatonni" id="rigatonni">
<br />Comments:
<textarea name="cm" cols="20" rows="2">Enter special instructions</textarea>
</td>
<td>
<label for="price">$15.99</label>
</td>
</tr>
<tr>
<td>
<br />
<label for="ensalada">
<input type="checkBox" id="iEnsalada" name="dinner" value="yes" onsubmit="sumOfCheckedBoxes()" />Italian Ensalada</label>
</td>
<td>
<label for="quantity">Quantity
<br />
<input type="text" name="ensalada" id="plate5" onblur="return checkForNumber(this.value);" />
</label>
</td>
<td>
<img src="ensalada.jpg" alt="ensalada" id="ensalada">
<br />Comments:
<textarea name="cm" cols="20" rows="2">Enter special instructions</textarea>
</td>
<td>
<label for="price">$9.99</label>
</td>
</tr>
</tbody>
</table>
</fieldset>
<input type="submit" value="send my order!">
<input type="reset">
</form>
<div>
<fieldset>
<legend>Stay Connected!</legend>
<h3>Subscribe to our Newsletter!</h3>
e-mail:
<input type="text" name="email" id="email" required="required">
<br />
<input type="submit" value="sign me up!">
<input type="reset">
</fieldset>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</p>
答案 0 :(得分：0)
onsubmit对输入字段不起作用。您应该在输入元素的表单 - 或 - onblur的提交上运行检查。