How do I count and check drop-down box values

[Guest]

I have a form that contains four drop-down boxes, one box each for a specific
item (item1, item2, item3, item4). Each drop-down box has four choices (1, 2,
3, 4). So for each Item, the user can select how many of that item they want,
up to four. For example they can select a quantity of 2 for item1, 3 for
item2, 1 for item3 and 4 for item4. They then click submit.
All that works without a problem. What I want however, is to limit the TOTAL
number of items selected from all four items. They can select 1 through 4 in
each drop-down but I don't want the total number of items to exceed 14. So if
they selected 4 in all four boxes, I would need someway to count this and pop
up a message that says something like "you have exceeded the total items
allowed". I assume this count and validation would need to happen when they
click the Submit button.
How do I do this count and validation.
Thanks... Mike

 

[Guest]

You could have a bit of javascript that would check that:
if the name of the form is "form1" and the select boxs are called
"select1"..."select4"

in the head of file put:

<script>
function checkTotal()
{
var opt1 = document.form1.select1.value;
var opt2 = document.form1.select2.value;
var opt3 = document.form1.select3.value;
var opt4 = document.form1.select4.value;
var total = parseInt(opt1) + parseInt(opt2) + parseInt(opt3)
+parseInt(opt4);
if (total > 14)
{
alert("The total values exceed 14 please change selection.");
}
else
{
document.form1.submit();
}
}
</script>

then for your submit button put:

 

[MD Websunlimited]

Hi Mark,

That code will not work as you have to get the dropdowns selected value.

var opt1 = document.form1.select1.options[document.form1.select1.selectedIndex].value;

I would also recommend that this be done on each time the value changes on the selection drop down using the onchange event. No
reason to have the visitor click submit to find out that they are trying to select to many items.

<select onchange="checkTotal(this.form)" >
<option vaue="1">1</option>
....
</select>

<script language="javascript" >

function checkTotal(theForm) {
var total = theForm.select1.options[theForm.select1.selectedIndex].value;
total += theForm.select2.options[theForm.select2.selectedIndex].value;
total += theForm.select3.options[theForm.select3.selectedIndex].value;
total += theForm.select4.options[theForm.select4.selectedIndex].value;
total > 14 ? alert("The total number of items selected may not exceed 14"); : theForm.select1.focus();
}
--
Mike -- FrontPage MVP '97-'02
J-Bots 2004 102 Components For FP
http://www.websunlimited.com
FrontPage Add-ins Since '97 FP 2003 / 2002 / 2000 Compatible

 

[Guest]

I'm sorry guys, I don't know much about writing Java script. Does FP 2003
provide an easy way to do this. Or if it' sjust a matter of copy/paste the
code you provided, can you tell me where to put it in the page code? (I know
I would have to change the field value names in your examples).

Thanks...
Mike

Hi Mark,

That code will not work as you have to get the dropdowns selected value.

var opt1 = document.form1.select1.options[document.form1.select1.selectedIndex].value;

I would also recommend that this be done on each time the value changes on the selection drop down using the onchange event. No
reason to have the visitor click submit to find out that they are trying to select to many items.

<select onchange="checkTotal(this.form)" >
<option vaue="1">1</option>
....
</select>

<script language="javascript" >

function checkTotal(theForm) {
var total = theForm.select1.options[theForm.select1.selectedIndex].value;
total += theForm.select2.options[theForm.select2.selectedIndex].value;
total += theForm.select3.options[theForm.select3.selectedIndex].value;
total += theForm.select4.options[theForm.select4.selectedIndex].value;
total > 14 ? alert("The total number of items selected may not exceed 14"); : theForm.select1.focus();
}
--
Mike -- FrontPage MVP '97-'02
J-Bots 2004 102 Components For FP
http://www.websunlimited.com
FrontPage Add-ins Since '97 FP 2003 / 2002 / 2000 Compatible

You could have a bit of javascript that would check that:
if the name of the form is "form1" and the select boxs are called
"select1"..."select4">

in the head of file put:

<script>
function checkTotal()
{
var opt1 = document.form1.select1.value;
var opt2 = document.form1.select2.value;
var opt3 = document.form1.select3.value;
var opt4 = document.form1.select4.value;
var total = parseInt(opt1) + parseInt(opt2) + parseInt(opt3)
+parseInt(opt4);
if (total > 14)
{
alert("The total values exceed 14 please change selection.");
}
else
{
document.form1.submit();
}
}
</script>

then for your submit button put: