PDA

Click to See Complete Forum and Search --> : checkbox math

awebb
07-03-2003, 08:20 AM
I have four textboxes populated with numbers and beside each one a checkbox.
I want the total to be displayed depending on the selection that the customer makes using a button (onClick).

Heres the code: (sorry its so verbose, its the only way I can make sense out of it!).

function addPrice(form)
{
var price1=parseInt(form1.price1.value);/* Turn textbox values into integers*/
var price2=parseInt(form1.price2.value);
var price3=parseInt(form1.price3.value);
var price4=parseInt(form1.price4.value);

if (form1.pricecheck1.checked)
{
form1.totalprice.value=price1;
}
if (form1.pricecheck1.checked && form1.pricecheck2.checked)
{
form1.totalprice.value=price1+price2;
}
if (form1.pricecheck1.checked && form1.pricecheck2.checked && form1.pricecheck3.checked)
{
form1.totalprice.value=price1+price2+price3;
}
if (form1.pricecheck1.checked && form1.pricecheck2.checked && form1.pricecheck3.checked && form1.pricecheck4.checked)
{
form1.totalprice.value=price1+price2+price3+price4;
}
else alert("You may only select single or consecutive weeks.");
}

The onClick code is: onClick"addPrice(this.form)"

many thanks in advance,
Andy
pelegk1
07-03-2003, 08:58 AM
was execlly your Q ?
SlankenOgen
07-03-2003, 09:29 AM
<script type = "text/javascript">

function a()
{
var x = 0;
var total = 0.00;

for(var i = 0; i < document.F.length; i++)
{
if((document.F[i].type == "checkbox") && (document.F[i].checked == true))
{
x = parseFloat(document.F[i].value);
total += x;
}
}
alert(total);
document.F.total.value = total;
}





</script>
</head>

<body bgcolor="#ffffff">
<form action="(EmptyReference!)" method="get" name="F">
<input type="checkbox" name="a1" value="2" border="0">
<input type="checkbox" name="a2" value="2" border="0">
<input type="radio" name="default" value="radioValue" border="0">
<input type="checkbox" name="a3" value="2" border="0">
<input type="checkbox" name="a4" value="2" border="0">
<input type="checkbox" name="a5" value="2" border="0">
<input type="button" onclick="a()">
<input type="text" name = "total" value = "0">
</form>
<p></p>
</body>

</html>
awebb
07-04-2003, 05:34 AM
First off, thanks to Dave Clarke and SlankenOgen, you've been a great help.

I have slightly adapted SlankenOgens script and it kind of works...
I get perfect results with the last two checkboxex but they do not all work together quite right.

The values are going in there because if I check one of the top two boxes at first nothing happens, then when I check either of the bottom two boxes it adds the sum of the top one AND the bottom one.
Subtraction is also possible in a similar way ie if all boxes are checked the proper total is shown but if the bottom two boxes are then unchecked the correct total of the top two boxes is shown.
However I can check away as long as I like with the top two boxes and nothing happens at all.

The html is correct in that the checkboxes are correctly identified as checkboxes.

Here is the amended script:

function addPrice()
{
var x=0;
var total=0;

for (i=0;i<form1.length;i++)
{
if ((form1[i].type=="checkbox")&&(form1[i].checked==true))
{
x=parseInt(form1[i].value);
total+=x;
}
}
alert(total);
form1.totalprice.value=total;
}

Have I done something wierd?
SlankenOgen
07-04-2003, 06:12 AM
form1 is insufficient. Replace all instances of it with-

document.form1

function addPrice()
{
var x=0;
var total=0;

for (i=0;i<document.form1.length;i++)
{
if ((document.form1[i].type=="checkbox")&&(document.form1[i].checked==true))
{
x=parseInt(document.form1[i].value);
total+=x;
}
}
alert(total);
document.form1.totalprice.value=total;
}
awebb
07-04-2003, 07:16 AM
Ok have replaced all instances of form1.... with document.form1...
Now I am getting an error "document.form1...." is null or not an object."

The other function I have on the page works best without the "document" bit as well.

Andy
SlankenOgen
07-04-2003, 07:23 AM
It's working fine for me. Can U post all your code + html?
awebb
07-04-2003, 08:14 AM
Sure. You should note that this page is just for working up the system.

Here's the code:

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript">
<!--
function selectedDate(form)
{
var dateSelection1="";
var dateSelection2="";
var dateSelection3="";
var dateSelection4="";
var monthArray=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var priceArray=new Array("600","900","1000","1500");
var sel=form1.weeks;
var myString1=sel.options[sel.selectedIndex].value;
var myStringArray1=myString1.split(",");
var myString2=sel.options[sel.selectedIndex+1].value;
var myStringArray2=myString2.split(",");
var myString3=sel.options[sel.selectedIndex+2].value;
var myStringArray3=myString3.split(",");
var myString4=sel.options[sel.selectedIndex+3].value;
var myStringArray4=myString4.split(",");

for (var i=0;i<document.form1.weeks.length;i++)
{
if (document.form1.weeks.options[i].selected)
{
dateSelection1=document.form1.weeks.options[i].value;
}
if (document.form1.weeks.options[i].selected)
{
dateSelection2=document.form1.weeks.options[i+1].value;
}
if (document.form1.weeks.options[i].selected)
{
dateSelection3=document.form1.weeks.options[i+2].value;
}
if (document.form1.weeks.options[i].selected)
{
dateSelection4=document.form1.weeks.options[i+3].value;
}
}
document.form1.textbox1.value=dateSelection1;
document.form1.textbox2.value=dateSelection2;
document.form1.textbox3.value=dateSelection3;
document.form1.textbox4.value=dateSelection4;

if (myStringArray1[1]==" June")
{
document.form1.price1.value=priceArray[0];
document.form1.pricecheck1.value=priceArray[0];
}
if (myStringArray2[1]==" June")
{
document.form1.price2.value=priceArray[0];
document.form1.pricecheck2.value=priceArray[0];
}
if (myStringArray3[1]==" June")
{
document.form1.price3.value=priceArray[2];
document.form1.pricecheck3.value=priceArray[2];
}
if (myStringArray4[1]==" July")
{
document.form1.price4.value=priceArray[3];
document.form1.pricecheck4.value=priceArray[3];
}
}
function addPrice()
{
var x=0;
var total=0;

for (i=0;i<document.form1.length;i++)
{
if ((document.form1[i].type=="checkbox")&&(document.form1[i].checked==true))
{
x=parseInt(document.form1[i].value);
total+=x;
}
}
alert(total);
document.form1.totalprice.value=total;
}

//-->
</script>
<style type="text/css">
<!--
body {
font-family: Tahoma;
font-size: 7pt;
}
-->
</style>
</head>

<body>
<form id="form1" action="" onsubmit="" >

<table width="100" border="0">
<tr>

</tr>
</table>
<table width="600" border="0" align="center">
<tr>
<td width="100">&nbsp;</td>
<td width="100" align="center" bordercolor="#996633">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="50">&nbsp;</td>
<td width="25">&nbsp;</td>
<td width="225">&nbsp;</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="100" rowspan="3" align="center" bordercolor="#996633"><select name="weeks" id="select" size="5" >
<option value="" >Please Choose</option>
<option value="Sat, June, 14, 2003">Sat, June, 14, 2003</option>
<option value="Sat, June, 21, 2003">Sat, June, 21, 2003</option>
<option value="Sat, June, 29, 2003">Sat, June, 29, 2003</option>
<option value="Sat, July, 05, 2003">Sat, July, 05, 2003</option>
<option value="Sat, July, 12, 2003">Sat, July, 12, 2003</option>
<option value="Sat, July, 19, 2003">Sat, July, 19, 2003</option>
<option value="Sat, July, 26, 2003">Sat, July, 26, 2003</option>
<option value="Sat, August, 02, 2003">Sat, August, 02, 2003</option>
</select></td>
<td width="100"><input name="textbox1" type="text" value="" size="20" /></td>
<td width="50" align="right"><input name="price1" type="text" id="price1" size="5" /></td>
<td width="25"><input name="pricecheck1" type="checkbox" id="pricecheck1" value="" /></td>
<td width="225" align="right">Select weeks.</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="100"><input name="textbox2" type="text" id="textbox2" value="" size="20" /></td>
<td width="50" align="right"><input name="price2" type="text" id="price2" size="5" /></td>
<td width="25"><input name="pricecheck2" type="checkbox" id="pricecheck2" value="" /></td>
<td width="225" align="right">&nbsp;</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="100"><input name="textbox3" type="text" id="textbox3" size="20" /></td>
<td width="50" align="right"><input name="price3" type="text" id="price3" size="5" /></td>
<td width="25"><input name="pricecheck3" type="checkbox" id="pricecheck3" value="" onclick="addPrice()" /></td>
<td width="225" align="right">&nbsp;</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="100" bgcolor="#FFFFFF"><input type="button" align="center" name="Choose" value="Starting week" onclick="selectedDate(this.form)" /></td>
<td width="100"><input name="textbox4" type="text" id="textbox4" size="20" /></td>
<td width="50" align="right"><input name="price4" type="text" id="price4" size="5" /></td>
<td width="25"><input name="pricecheck4" type="checkbox" id="pricecheck4" value="" onclick="addPrice()" /></td>
<td width="225" align="right">Total Price:
<input name="totalprice" type="text" id="totalprice" size="5" value="00" /></td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="100" align="center" bordercolor="#996633">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="50">&nbsp;</td>
<td width="25">&nbsp;</td>
<td width="225" align="right">&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
</form>

</body>
</html>
awebb
07-04-2003, 08:23 AM
Ah yes...naming the form...that helps!

Ok I don't get the "null...objects..." but the original problem with the two top checkboxes not working properly still exists.

Thanks for your time,
Andy
SlankenOgen
07-04-2003, 09:23 AM
input name="price2" type="text" id="price2" size="5"

I believe you can lose the id= since you also have name=.
awebb
07-04-2003, 10:07 AM
I have a deadline for this work...but its NOT today so don't feel any pressure. I am amazed at what you have already contributed.
Yes, all id= have now gone.
It has not changed the wierd math.
Those top two checkboxes don't do a damn thing!
I have even tried deleting and rewriting them...
Its like the funtion can't recognise the first two checkboxes though I did wonder about the way the values are passed to it, but the values are there because of the math...my head hurts, I am going to have a cup of Jasmine tea.

Andy
awebb
07-05-2003, 12:32 AM
Dave,
Your suggestion does work, I tried it out first.
I used the other suggestion because it had the checkboxes with different names.
Your suggestion wouldn't work when I changed the names of the checkboxes. I admit I didn't try very hard because the other suggestion was there to be tried, and when I tried it, it worked (until I put it into the page setup I'm trying to build).
I need the checkboxes to have different names because the values have to be generated by a <select>. Well I THINK they need to have different names but having managed to create a form without a name I am aware that I am not on any moral high ground.
I have had another look at your function and I think I can see how to adapt it to work on my page.
Thanks for your help.
Andy
awebb
07-05-2003, 01:17 AM
OK its serious grovelling embarrasment time.
SlankenOgen...the reason your script doesn't work on my pages is that I omitted the onClick="functionName()" on the first two checkboxes.
I guess thats what happens when you spend too long looking at the problem.
Thanks for your help.
Andy