[samf]

Hi,

My situation is I have just completed an order form and everything works fine with it no problems. Then afterwards I got asked to edit it slightly so it can auto work out the total of the order whilst selecting the different pricing options. The total price will change depending on what boxes are selected so its just basically adding up the values of the checkbox(s) that are selected.

Code that I currently have now is:

Top of page (in header bracket):

<script type="text/javascript" src="autoSumCheckboxes.js"></script>

This is the code for my autoSumCheckboxes.js file:

function UpdateCost() {
  var sum = 0;
  var ev, elem;
  for (i=0; i<3; i++) 
  {
   	ev = 'registrationday'+i;
	elem = document.getElementById(ev);
	if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2);
}

The html on my order form page is:

<input name="registrationday3" type="checkbox" id="registrationday3" value="55.00" onclick="CheckRegistration56Days();DisplayconfPay3();UpdateCost()">

							<input type="checkbox" name="registrationday2" id="registrationday2" value="55.00" onclick="CheckRegistrationDaysBothOption();DisplayconfPay2();UpdateCost()">

						  <input name="registrationday1" type="checkbox" id="registrationday1" value="55.00" onclick="CheckRegistrationDaysBothOption();DisplayconfPay1();UpdateCost()"

						  <input type="checkbox" name="fifthDecCheckBox" id="fifthDecCheckBox" value="55.00" onclick="DisplayfifthDecPanel();UpdateCost()">

And here is my textbox where the total figure should be displayed:

 <input name="text" type="text" id="totalcost" value="">

Thats my attempt on it and I cant get it working. I havn't had much experience with javascript so probably one of the main factors in why

Any help will be appreciated!

Thanks

[xerxes333]

Well for starters <input name="registrationday1" type="checkbox" id="registrationday1" value="55.00" onclick="CheckRegistrationDaysBothOption();DisplayconfPay1();UpdateCost()" is missing a closing bracket (I'm assuming thats a typo. Next your for loop starts at zero but the ids of your inputs start at one so the first time through the for loop i = 0 and there is not element called "registrationday0". Next every time you call the UpdateCost() function the var sum is set to zero, I'm guessing you want to retain the value each time UpdateCost() is executed so you either need a global variable that stores the sum or you need to retrieve the existing value.

[samf]

Thanks, it works abit better now. Once I done them changes it would only display the 3 boxes called registrationday1;registrationday2 & registrationday3 and wouldnt add up fifthdecgaladinner. Ive now done some extra changes to the code and now it displays the values of all 4 boxes on the form but it doesnt add up the values it just displays the last clicked box! So if i select registrationday3 (£100) it will display £100 then i also select fifthdecgaladinner (£55) instead of displaying £155 it will only display the £55 and not add the £100 ontop.

The code I got now is:

This is the code for my autoSumCheckboxes.js file:

function UpdateCost(ev) {
  var sum = 0;
  var elem;
//   	ev = 'registrationday'+i;
	elem = document.getElementById(ev);
	if (elem.checked == true) { sum += Number(elem.value); alert(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2);
}

and code thats on my order form:

<input name="registrationday1" type="checkbox" id="registrationday1" value="55.00" onclick="CheckRegistrationDaysBothOption();DisplayconfPay1();UpdateCost('registrationday1')">  

							<input type="checkbox" name="registrationday2" id="registrationday2" value="55.00" onclick="CheckRegistrationDaysBothOption();DisplayconfPay2();UpdateCost('registrationday2')">

<input name="registrationday3" type="checkbox" id="registrationday3" value="100.00" onclick="CheckRegistration56Days();DisplayconfPay3();UpdateCost('registrationday3')"> 

						  <input type="checkbox" name="fifthDecCheckBox" id="fifthDecCheckBox" value="55.00" onclick="DisplayfifthDecPanel();UpdateCost('fifthDecCheckBox')">

What am I missing to add the figures as my previous version didn't work as some checkboxes had different names!

Thanks

[xerxes333]

Well your getting closer. Here is what I think might accomplish your task. If you need me to explain any of it let me know.

function UpdateCost(ev) {
	var sum = Number(document.getElementById('totalcost').value);
	if (ev.checked){
		sum += Number(ev.value);
		document.getElementById('totalcost').value = sum.toFixed(2);
	}
	else{
		sum -= Number(ev.value);
		document.getElementById('totalcost').value = sum.toFixed(2);
	}
	
}

EDIT:
I forgot to mention, that when you call the function pass the current element example: onclick="UpdateCost(this);"

This post has been edited by xerxes333: 26 November 2008 - 09:44 AM

[samf]

That works perfectly. I have given you a thanks for your time and obviously helping me solve this problem.

Just so I definatley know how the code works step by step would you be able to just quickly write down some comments? I hate not knowing how it works thats all.

[JMRKER]

Quote

Just so I definatley know how the code works step by step would you be able to just quickly write down some comments? I hate not knowing how it works thats all.

Might be a better option for you to put in your comments and then have the reviewer comment on your explainations of the code actions. Be as specific as you can. If you have the correct understanding then the comments will be correct.

[xerxes333]

I made a slight change (sorry my OCD is acting up ) and added the comments like you asked. Glad I could help.

	
function UpdateCost(ev) {
	// first we need the current value of the 'totalcoast' 
	// element and we set it to a number
	var sum = Number(document.getElementById('totalcost').value);
	
	// Since ev.checked evaluates to true or false we can use 
	// (ev.checked) rather than (ev.checked==true)
	
	// IF the check box is checked then we set the sum 
	// eqaul to the checkbox value PLUS the value of the current sum
	// ELSE we set the sum eqaul to the checkbox value MINUS the value 
	// of the current sum
	if (ev.checked){
		
		sum += Number(ev.value);
	}
	else{
		sum -= Number(ev.value);
	}
	// *** CHANGED HERE ***
	// I moved this part out of the if/else statement because its more efficient.
	
	// We simply update the value of the 'totalcost' with the 
	// new sum to reflect to the user any change we have made
	document.getElementById('totalcost').value = sum.toFixed(2);
	
}
	

[samf]

Thank you that makes alot more sense now!

Ive actually came across a problem with the code. Lets say I am selecting between two boxes (lets say registrationday2 and registrationday3. First of all I would select registrationday3 and it will display £100, then id select registrationday2 and it would display £155 instead of just £55. Within my other code in Javascript I have made it so registrationday1, registrationday2 and registrationday3 cannot be checked at the same time as each other but the galadinnerbox (fifthdeccheckbox) can be checked with either of the 3.

So if i keep switching between the 3 the order total ends up building up amoutns of £500/£600+ amounts.

What kinds functions or steps would I need to do to stop this happening? As im pretty new at JS I feel im slowly slipping out of my depth so to speak.

This is the Javascript I got to validate my checkboxes and help check/uncheck them:

		function CheckRegistration56Days()
		{
			var day1 = document.getElementById('registrationday1');
			var day2 = document.getElementById('registrationday2');
			var day3 = document.getElementById('registrationday3');
			
			if(day3.checked)
			{
				day2.checked = false;
				day1.checked = false;
			}
			else if(!day3.checked)
			{
				day2.checked = false;
				day1.checked = false;
			}
		}

		function CheckRegistrationDaysBothOption()
		{
			var day1 = document.getElementById('registrationday1');
			var day2 = document.getElementById('registrationday2');
			var day3 = document.getElementById('registrationday3');
			
			if(day2.checked)
			{
				day1.checked = false;
				day3.checked = false;
			}
			else if(!day2.checked)
			{
				day3.checked = false;
			}
		} 

Thanks,
Sam

This post has been edited by samf: 27 November 2008 - 04:17 AM

[samf]

Its all sorted now.

/Topic closed