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

Assigning values to check boxes and adding the numbers

P: 9
The following routine adds a number to the total each time the checkbox with an assigned number is checked. This works perfectly (Example 1). But when I try to assign a variable that was calculated previously (Example 2), it returns a NaN in the Total, Can someone help me fix this? Thanks.

Example 1. This works
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.     function checkTotal() {
  3.         document.listForm.total.value = '';
  4.         var sum = 0;
  5.         for (i=0;i<document.listForm.choice.length;i++) {
  6.           if (document.listForm.choice[i].checked) {
  7.               sum = sum + parseInt(document.listForm.choice[i].value);
  8.           }
  9.         }
  10.         document.listForm.total.value = sum;
  11.     }
  12. </script>
  13.  
  14. <form name="listForm">
  15. <input type="checkbox" name="choice" value="2" onchange="checkTotal()"/>2<br/>
  16. <input type="checkbox" name="choice" value="5" onchange="checkTotal()"/>5<br/>
  17. <input type="checkbox" name="choice" value="10" onchange="checkTotal()"/>10<br/>
  18. <input type="checkbox" name="choice" value="20" onchange="checkTotal()"/>20<br/>
  19. Total: <input type="text" size="2" name="total" value="0"/>
  20. </form>
  21.  
Example 2. This returns a NaN in the Total field
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.     function checkTotal() {
  3.         document.listForm.total.value = '';
  4.         var sum = 0;
  5.         for (i=0;i<document.listForm.choice.length;i++) {
  6.           if (document.listForm.choice[i].checked) {
  7.               sum = sum + parseInt(document.listForm.choice[i].value);
  8.           }
  9.         }
  10.         document.listForm.total.value = sum;
  11.     }
  12. </script>
  13.  
  14. <form name="listForm">
  15. <input type="text" name="Item1cost" value="2" >2
  16. <input type="checkbox" name="choice" value="Item1cost" onchange="checkTotal()"/><br>
  17.  
  18. <input type="text" name="Item2cost" value="5" >5
  19. <input type="checkbox" name="choice" value="Item2cost " onchange="checkTotal()"/><br>
  20.  
  21. <input type="text" name="Item3cost " value="5" >5 
  22. <input type="checkbox" name="choice" value="Item3cost" onchange ="checkTotal()"/> <br>
  23.  
  24. <input type="test" name="Item4cost" value="20">20
  25. <input type="checkbox" name="choice" value="Item4cost" onchange="checkTotal()"/> <br>
  26.  
  27. Total: <input type="text" size="4" name="total" value="0"/>
  28. </form>
  29.  
Nov 19 '11 #1

✓ answered by Dormilich

taking the snippet from above:
Expand|Select|Wrap|Line Numbers
  1. var box = document.getElementsByName("choice")[0];
  2. alert(box.value);
  3. var txt = document.getElementsByName(box.value)[0];
  4. alert(txt.value);
  5.  
  6. // or
  7. var box = document.listForm.choice[0];
  8. var txt = document.listForm[box.value]; // since there is only one such name
  9. alert(txt.value);

Share this Question
Share on Google+
5 Replies


Dormilich
Expert Mod 5K+
P: 8,639
itís a wrong assumption that you can in the value reference a number from another element.
Expand|Select|Wrap|Line Numbers
  1. <input type="text" name="Item1cost" value="2" >2
  2. <input type="checkbox" name="choice" value="Item1cost" onchange="checkTotal()"/>
the value of the checkbox is the string "Item1cost" which obviously is parsed as NaN.

what you would need to do is taking the value from the checkbox and using that for fetching the value of the element that has this ID/name.
Nov 20 '11 #2

P: 9
I'm sorry, I don't understand. Can you give me an example? Thanks.
Nov 20 '11 #3

Dormilich
Expert Mod 5K+
P: 8,639
taking the snippet from above:
Expand|Select|Wrap|Line Numbers
  1. var box = document.getElementsByName("choice")[0];
  2. alert(box.value);
  3. var txt = document.getElementsByName(box.value)[0];
  4. alert(txt.value);
  5.  
  6. // or
  7. var box = document.listForm.choice[0];
  8. var txt = document.listForm[box.value]; // since there is only one such name
  9. alert(txt.value);
Nov 21 '11 #4

P: 9
Thanks so much. It makes so much sense once you showed me how to do it..
Nov 21 '11 #5

P: 9
Well it wasn't easy for someone who doesn't know Javascript, nor is it intuitive. I had to deal with parsing the text that converted it to numbers. For anyone wanting to do this, here's the code with the help of "Dormillich". It still took me half a day to figure it out.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function checkTotal() {
  5.     document.listForm.total.value = '';
  6.     var sum = 0;
  7.     for (i=0;i<document.listForm.choice.length;i++) {
  8.          if (document.listForm.choice[i].checked) {
  9.     var box = (document.listForm.choice[i]);
  10.         alert(box.value);
  11.     var txt = (document.listForm[box.value]); 
  12.            alert(txt.value);
  13.     sum = sum + parseInt(txt.value) ;    
  14.            alert(sum);
  15.            }
  16.     }
  17.      document.listForm.total.value = sum;
  18. }
  19. </script>
  20.  
  21. <form name="listForm">
  22. <input type="text" name="Item1cost" value="2" >2
  23. <input type="checkbox" name="choice" value="Item1cost" onChange="checkTotal()"/><br>
  24.  
  25. <input type="text" name="Item2cost" value="5" >5
  26. <input type="checkbox" name="choice" value="Item2cost" onChange="checkTotal()"/><br>
  27.  
  28. <input type="text" name="Item3cost" value="5" >5 
  29. <input type="checkbox" name="choice" value="Item3cost" onchange ="checkTotal()"/> <br>
  30.  
  31. <input type="test" name="Item4cost" value="20">20
  32. <input type="checkbox" name="choice" value="Item4cost" onChange="checkTotal()"/> <br>
  33.  
  34. Total: <input type="text" size="10" name="total" value="0"/>
  35. </form>
  36. </body>
  37. </html>
  38.  
Nov 22 '11 #6

Post your reply

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