By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,259 Members | 1,690 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,259 IT Pros & Developers. It's quick & easy.

radio or checkbox

100+
P: 347
I have the following code that adds up amounts if checked using a checkbox

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function calculate(f)
  3. {
  4. var nums = f.num;
  5. var ntext = f.num;
  6. var result = 0;
  7. for(var i=0;i<nums.length;i++)
  8. {
  9. if(nums[i].checked)
  10. {
  11. result+=parseFloat(ntext[i].value);
  12. }
  13. }
  14. f.answer.value=Number(result).toFixed(2);
  15. }
  16. </script>
it can be seen here http://www.yaketyyakallmouth.com/rad...enew/index.asp

problem is when you have the two selections next to each other we really only want one to be selected so i thought of using radio selectors instead but they use the name to group them together and this is used by the code above to add the amounts together.

any ideas around this
Dec 10 '09 #1
Share this Question
Share on Google+
54 Replies


Dormilich
Expert Mod 5K+
P: 8,639
jepp, using events on each radio that de/increments the value. see addAmount()
Dec 10 '09 #2

100+
P: 347
i found out that if i changed the id tag in the radio button to num and used the name as a field in the database that groups the stations together that works.
Dec 11 '09 #3

Dormilich
Expert Mod 5K+
P: 8,639
although it may work, it is dead wrong from the HTML point-of-view. since ids must be unique, you cannot substitute id for name. additionally, you can’t deselect a radio group, once it has been checked.

try getElementsByTagName() or getElementsByClassName()
Dec 11 '09 #4

100+
P: 347
i dont see what effect that will have if the page works?

and as i am useless with javascript i dont know what to do?
Dec 11 '09 #5

Dormilich
Expert Mod 5K+
P: 8,639
crossing a red traffic light does work too, until you get run over by a car.

give all the radios/checkboxes that should be calculated a common class name. employing the method document.getElementsByClassName() you can loop through that list to add the values.

the other approach is the incremental addition/subtraction of the currently clicked radio/checkbox (see your other thread). it only requires the events to be attached to every radio/checkbox, which can be accomplished in a similar manner.
Dec 12 '09 #6

100+
P: 347
problem i have is my lack of knowledge, the javascript i am using was not written by me just found it on the internet so am not sure how to change it to use document.getElementsByClassName() etc.
Jan 4 '10 #7

100+
P: 347
I am also trying to reset both the form and the total, i can reset the form but it only sets it back to the total carried over from another page? and if i reset the total as soon as i click another checkbox it adds that to the total carried over too

The javascript for keeping the totals is now with the result coming from the previouse pages total answer

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function calculate(f)
  3. {
  4. var nums = f.num;
  5. var ntext = f.num;
  6. var result = <%= request.form("answer")%>;
  7. for(var i=0;i<nums.length;i++)
  8. {
  9. if(nums[i].checked)
  10. {
  11. result+=parseFloat(ntext[i].value);
  12. }
  13. }
  14. f.answer.value=Number(result).toFixed(2);
  15.  }
  16. </script>
  17.  
and the code for zeroing the total is

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT language="javascript">
  2. function setzero(f)
  3. {
  4. var result = 0;
  5. document.getElementById("total").value = Number(result).toFixed(2);
  6. }
  7. </SCRIPT>
this works but only zeros the total in the text element of the form with the id "total" as soon as i add anything again its wrong. i am sure this is because of the request in asp in the script above but cant figure it out
Jan 4 '10 #8

Dormilich
Expert Mod 5K+
P: 8,639
does that mean you didn’t learn anything from your previous threads?
this works but only zeros the total in the text element of the form with the id "total" as soon as i add anything again its wrong.
obviously, the result variable set by ASP is still unchanged (and you always add on this)
Jan 4 '10 #9

100+
P: 347
i have tried but cant always get my head around it
Jan 4 '10 #10

Dormilich
Expert Mod 5K+
P: 8,639
with the current design of calculate() you wonít solve that problem.
Jan 4 '10 #11

100+
P: 347
any ideas on where to try? or is this down to me trying to figure out the document.getElementById way of doing this
Jan 4 '10 #12

Dormilich
Expert Mod 5K+
P: 8,639
it has nothing to do with getElementById(). check out your calculate() function. every time you call it, it sums all checked values on top of the ASP value. clearing the text field to zero does not affect this in any way.
Jan 4 '10 #13

100+
P: 347
hi i am trying to set the variable that is from the asp outside the function, i gather that should be the way to go but i keep getting NaN as a result in my text field not sure what this means
Jan 4 '10 #14

100+
P: 347
Hi i now have script to do the calculation like this

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function UpdateCost() {
  3.   var sum = document.write("<%= runtotal %>");
  4.   var gn, elem;
  5.   for (i=0; i<5; i++) {
  6.     gn = 'id'+i;
  7.     elem = document.getElementById(gn);
  8.     if (elem.checked == true) { sum += Number(elem.value); }
  9.   }
  10.   document.getElementById('total').value = sum.toFixed(2);
  11. </script>
runtotal is got from asp from the form of the the previous page and that works

my form element is this

Expand|Select|Wrap|Line Numbers
  1. <INPUT  type="checkbox" name="num" id="id<%= stationcount %>" onClick="UpdateCost()" value="<%= nationalRecordset("amount") %>">
station count is incremented through my asp loop from database

the problem i have at the moment is that when i go from one page to the page i am trying this on and look at the code the sum has the right total but when i click on the heckbox it reloads the page and just writes the sum on a blank page
Jan 5 '10 #15

Dormilich
Expert Mod 5K+
P: 8,639
when i click on the heckbox it reloads the page and just writes the sum on a blank page
I’d need something to see to make a qualified comment.
Jan 5 '10 #16

100+
P: 347
if you men the actual pages try

http://www.yaketyyak.co.uk/radiousefee/news.asp

check some boxes and then go to the national page thats where i am trying things at the moment
Jan 5 '10 #17

100+
P: 347
sorted it change the
Expand|Select|Wrap|Line Numbers
  1. document.write("<%= runtotal %>")
to
Expand|Select|Wrap|Line Numbers
  1. "<%= runtotal %>" 
i am now getting object does'nt support this propert or method in line 36 char 3

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('total').value = sum.toFixed(2);
Jan 5 '10 #18

Dormilich
Expert Mod 5K+
P: 8,639
i am now getting object does'nt support this propert or method in line 36 char 3
well, you try to access a Number method on a String object. this does not work.
Jan 5 '10 #19

100+
P: 347
i think you have lost me there!!!
Jan 5 '10 #20

Dormilich
Expert Mod 5K+
P: 8,639
try the following before that line
Expand|Select|Wrap|Line Numbers
  1. alert(typeof sum);
Jan 5 '10 #21

100+
P: 347
i gather this is string because of the fact i have made it from asp variables is there a way of converting it?

I have tried adding parsfloat('sum'"); in the line before but it still says its a string
Jan 5 '10 #22

Dormilich
Expert Mod 5K+
P: 8,639
because the function is called parseFloat(). you could also leave off the quotation marks, would be the same.
Jan 5 '10 #23

100+
P: 347
sorry that was my typing in the forum, what i actually have is theis

parseFloat('sum');
alert(typeof sum);

but it still says its a string, i have tried it without the quotes also
Jan 5 '10 #24

Dormilich
Expert Mod 5K+
P: 8,639
you are aware, that 'sum' is not the variable?
Jan 5 '10 #25

100+
P: 347
no i was not, just cant get this javascript, but am slowly learning, weird that i know asp though??
Jan 5 '10 #26

Dormilich
Expert Mod 5K+
P: 8,639
you don't want me to tell what I think of ASP ...
Jan 5 '10 #27

100+
P: 347
probably the same as me and javascript, what is the variable i really thought sum held the total
Jan 5 '10 #28

Dormilich
Expert Mod 5K+
P: 8,639
the variable is named sum just not within quotation marks, that would be then a string literal.
Jan 5 '10 #29

100+
P: 347
thanks for your help with all that, finally got it working and moving totals from page to page, i still have the same problem if you reset the form its not a problem but i was going to add a button to reset the total also but that does not want to work

the code for adding is now

Expand|Select|Wrap|Line Numbers
  1. function UpdateCost() {
  2.   var sum = <%= runtotal %>;
  3.   var gn, elem;
  4.   for (i=0; i<5; i++) {
  5.     gn = 'id'+i;
  6.     elem = document.getElementById(gn);
  7.     if (elem.checked == true) { sum += Number(elem.value); }
  8.   }
  9.   parseFloat(sum);
  10.   document.getElementById('total').value = sum.toFixed(2);
i have a feeling i have just gone round in a circle to end up with the same problem though
Jan 5 '10 #30

Dormilich
Expert Mod 5K+
P: 8,639
i have a feeling i have just gone round in a circle to end up with the same problem though
that’s correct.

you need a way to change line 2.
Jan 5 '10 #31

100+
P: 347
yes thats what i thought i think i may have to reload the page and reset the variable to 0 in asp
Jan 5 '10 #32

Dormilich
Expert Mod 5K+
P: 8,639
why so complicated?
Jan 5 '10 #33

100+
P: 347
its the only way i can think of doing it, judging by your answer i should look for something more simple
Jan 5 '10 #34

100+
P: 347
I have tried a few things and cant get anything to work, i have a feeling that passing a total to the variable from calling the function might work so this is what i have now, can you tell me if im in the right direction

This is the code for adding the total
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var runtotal = <%= runtotal %>;
  3.   parseFloat('runtotal');
  4.  
  5. function UpdateCost(runtotal) {
  6.   var gn, elem;
  7.   for (i=0; i<200; i++) {
  8.     gn = 'id'+i;
  9.     elem = document.getElementById(gn);
  10.     if (elem.checked == true) { runtotal += Number(elem.value); }
  11.   }
  12.   parseFloat('runtotal');
  13.   document.getElementById('total').value = runtotal.toFixed(2);
  14. }
and i am calling the function like this

Expand|Select|Wrap|Line Numbers
  1. <INPUT type="button" name="button2" id="button2" value="Reset Total" onClick="UpdateCost(0)">
Jan 6 '10 #35

Dormilich
Expert Mod 5K+
P: 8,639
er, why do you use runtotal as parameter? this way you wonít be able to change it. although thatís the direction I had in mind.
Jan 6 '10 #36

100+
P: 347
Im not sure i am just trying anything, i just cant see how to do this.
Jan 6 '10 #37

Dormilich
Expert Mod 5K+
P: 8,639
ok, some genral tips:

what you want
set the total amount to zero

what you have
- a function, that resets the "totals" field
- a global var named runtotal, populated onload by ASP
- some useless parseFloat() calls
- a (IMHO too complicated) function adding values on top of runtotal

problem (if you get this one right, thatís half the solution)
set runtotal to zero

solution
set the global var runtotal to zero AND donít use its original value hardcoded
Jan 6 '10 #38

100+
P: 347
i can do all this but what happens when i want to keep the totals across all the pages as thats what the runtotal var populated by asp was for?
Jan 6 '10 #39

100+
P: 347
Just a bit different i have this code to set my global variable sum

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var sum = <%= runtotal %>;
  3.   parseFloat('runtotal');
  4.   </script>
  5.  
This code then adds checked amounts to sum not using the asp amount i think!! after it was used to set the total above, i have also simplified it a bit, baring in mind my lack of knowledge

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT language="javascript">
  2.  
  3. function UpdateCost() {
  4.  
  5.   var gn;
  6.   for (i=0; i<5; i++) {
  7.     gn = 'id'+i;
  8.     if (document.getElementById(gn).checked == true) { sum += Number(document.getElementById(gn).value); }
  9.   }
  10.    parseFloat(sum);
  11.   document.getElementById('total').value = sum.toFixed(2);
  12. }
this code is called from a button to zero the amount which it does the alert returns a 0
Expand|Select|Wrap|Line Numbers
  1. <SCRIPT language="javascript">
  2. function setzero()
  3. {
  4.  
  5. var sum = 0;
  6.  
  7. document.getElementById("total").value = Number(sum).toFixed(2);
  8. alert (sum);
  9. }
  10.  
  11. </SCRIPT>
yet when i click something to add that amount to sum it still uses the original total even though my add coe only adda an amount to sum? am i wrong in thinking this?
Jan 6 '10 #40

Dormilich
Expert Mod 5K+
P: 8,639
the crux lies in the scope. setzero() uses a local variable named sum, leaving the global sum untouched.

and if you didn’t read the parseFloat() description yet, you should do so immediately.
Jan 6 '10 #41

100+
P: 347
i realised that about the sum variable and removed the var bit from the function, will check the use of parsfloat() later, thanks for your help
Jan 6 '10 #42

100+
P: 347
well now ive got all this working i am now being asked how people unselect things if the click the wrong selection, i have said it cant be done, so is there a way of unselectiong the radio button used in the code, or maybe changing the radio button to a checkbox but making them work like a radio group??
Jan 19 '10 #43

Dormilich
Expert Mod 5K+
P: 8,639
radioboxes do not unselect by themselves, but you can do that with a little help of JavaScript. i.e. set the checked property to false. however, there are many ways to implement that.
Jan 19 '10 #44

100+
P: 347
yesy i thought of just putting a reset button on each set but would that not then mess up my calculations
Jan 19 '10 #45

Dormilich
Expert Mod 5K+
P: 8,639
not necessarily, you can define buttons using <button>, or you can write your script in a way, that it doesn’t matter. you may not even require a button.
Jan 19 '10 #46

100+
P: 347
could i script it so if you clicked on a radio that is selected it would set it as unselected
Jan 19 '10 #47

Dormilich
Expert Mod 5K+
P: 8,639
yes, you can.
Jan 19 '10 #48

100+
P: 347
ok

My calculations are set with this code

Expand|Select|Wrap|Line Numbers
  1. function calculate(f)
  2. {
  3. var nums = f.num;
  4. var ntext = f.num;
  5. var result = 0;
  6. for(var i=0;i<nums.length;i++)
  7. {
  8. if(nums[i].checked)
  9. {
  10. result+=parseFloat(ntext[i].value);
  11. }
  12. }
  13. f.answer.value=Number(result).toFixed(2);
will a click event change this?
Jan 19 '10 #49

Dormilich
Expert Mod 5K+
P: 8,639
before I answer that Ö make an educated guess.

hint: check your event handlers
Jan 19 '10 #50

54 Replies

Post your reply

Sign in to post your reply or Sign up for a free account.