% =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="javascript">
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,drop2Value,drop3Value;
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=document.cakeForm.intQuant1.options[document.cakeForm.intQuant1.options.selectedIndex].value;
var
drop2Value=document.cakeForm.intQuant2.options[document.cakeForm.intQuant2.options.selectedIndex].value;
var
drop3Value=document.cakeForm.intQuant3.options[document.cakeForm.intQuant3.options.selectedIndex].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.intQuant1.focus();
That should be document.cakeForm... document.cakeForm.intQuant1.style.background = "#DEAA0C";
return false ;
}
if (grandtotal > 12) {
alert( "You have too many items selected. You need to choose 12
cheesecakes." );
cakeForm.intQuant1.focus();
Again, document.cakeForm...
document.cakeForm.intQuant1.style.background = "#DEAA0C";
return false ;
}
if (grandtotal = 12) {
The equality comparison operator is "==", not "=".
document.cakeForm.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="return 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(q1,q2,q3) {
var total = +q1.options[q1.selectedIndex].value
+ +q2.options[q2.selectedIndex].value
+ +q3.options[q3.selectedIndex].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="return
addListValues(this.intQuant1,this.intQuant2,this.i ntQuant3)">
<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>
