% =joe % said:
I cannot get this code to work. Very simple...I have three list
menus. I want to do a check before the form submits to make sure that
the value of the 3 fields is equal to 12.
Here's my code...
<script language="javas cript">
The <script> tag should have a type attribute:
<script type="text/javascript">
<!--
That line does nothing. Remove it and the matching //-->
function addListValues() {
You could simplify the code, and make it more portable, by passing
arguments into it, instead of making the function know where to
find the values.
var grandtotal = 0;
var drop1Value,drop 2Value,drop3Val ue;
Since you redefine each of these just below, these lines
don't really add anything (if you add a "var" to your
assignment to grandtotal, below).
var
drop1Value=doc ument.cakeForm. intQuant1.optio ns[document.cakeFo rm.intQuant1.op tions.selectedI ndex].value;
var
drop2Value=doc ument.cakeForm. intQuant2.optio ns[document.cakeFo rm.intQuant2.op tions.selectedI ndex].value;
var
drop3Value=doc ument.cakeForm. intQuant3.optio ns[document.cakeFo rm.intQuant3.op tions.selectedI ndex].value;
grandtotal = (drop1Value-0) + (drop2Value-0) + (drop3Value-0);
if (grandtotal < 12) {
alert( "You do not have enough items selected. You need to choose
12 cheesecakes." );
cakeForm.intQua nt1.focus();
That should be document.cakeFo rm... document.cakeFo rm.intQuant1.st yle.background = "#DEAA0C";
return false ;
}
if (grandtotal > 12) {
alert( "You have too many items selected. You need to choose 12
cheesecakes. " );
cakeForm.intQua nt1.focus();
Again, document.cakeFo rm...
document.cakeFo rm.intQuant1.st yle.background = "#DEAA0C";
return false ;
}
if (grandtotal = 12) {
The equality comparison operator is "==", not "=".
document.cakeFo rm.submit();
It's better to avoid submit() via Javascript. If you validate
in the onSubmit handler, then returning false will prevent the
form from submitting, and returning anything else will allow
it to submit.
//return false ;
}
}
//-->
Again, these HTML comments are not needed.
There are no longer any browsers in use that need them.
If there were, they wouldn't be able to use your form, anyway.
</script>
Here is one of my three list menus:
<select name="intQuant1 ">
<option value="0">0</option>
<option value="12">12</option>
<option value="4">6</option>
The value should be "6" in that line.
<option value="4">4</option>
</select>
My submit buttonhas this call... onClick="return addListValues() ;
Should be <form .... onsubmit="retur n addListValues(. ..)">
Here's a working example. Don't turn it in as your own homework:
<html>
<head>
<title>Say Cheesecake!</title>
<script type="text/javascript">
function addListValues(q 1,q2,q3) {
var total = +q1.options[q1.selectedInde x].value
+ +q2.options[q2.selectedInde x].value
+ +q3.options[q3.selectedInde x].value;
if(total==12) {
return true;
} else {
alert("You have chosen " + total + " cheesecakes.\n"
+"You must choose exactly 12.");
return false;
}
}
</script>
</head>
<body>
<!-- The following line may wrap when posted -->
<form onsubmit="retur n
addListValues(t his.intQuant1,t his.intQuant2,t his.intQuant3)" >
<select name="intQuant1 ">
<option value="0">0</option>
<option value="12">12</option>
<option value="6">6</option>
<option value="4">4</option>
</select>
<select name="intQuant2 ">
<option value="0">0</option>
<option value="12">12</option>
<option value="6">6</option>
<option value="4">4</option>
</select>
<select name="intQuant3 ">
<option value="0">0</option>
<option value="12">12</option>
<option value="6">6</option>
<option value="4">4</option>
</select>
<input type="submit" value="submit">
</form>
</body>
</html>
