Assigning values to check boxes and adding the numbers

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jamming
    New Member
    • Nov 2011
    • 9
    #1

    Assigning values to check boxes and adding the numbers

    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
    Code:
    <script type="text/javascript">
    function checkTotal() {
        document.listForm.total.value = '';
        var sum = 0;
        for (i=0;i<document.listForm.choice.length;i++) {
          if (document.listForm.choice[i].checked) {
              sum = sum + parseInt(document.listForm.choice[i].value);
          }
        }
        document.listForm.total.value = sum;
    }
</script>
 
<form name="listForm">
<input type="checkbox" name="choice" value="2" onchange="checkTotal()"/>2<br/>
<input type="checkbox" name="choice" value="5" onchange="checkTotal()"/>5<br/>
<input type="checkbox" name="choice" value="10" onchange="checkTotal()"/>10<br/>
<input type="checkbox" name="choice" value="20" onchange="checkTotal()"/>20<br/>
Total: <input type="text" size="2" name="total" value="0"/>
</form>
    Example 2. This returns a NaN in the Total field
    Code:
    <script type="text/javascript">
    function checkTotal() {
        document.listForm.total.value = '';
        var sum = 0;
        for (i=0;i<document.listForm.choice.length;i++) {
          if (document.listForm.choice[i].checked) {
              sum = sum + parseInt(document.listForm.choice[i].value);
          }
        }
        document.listForm.total.value = sum;
    }
</script>
 
<form name="listForm">
<input type="text" name="Item1cost" value="2" >2
<input type="checkbox" name="choice" value="Item1cost" onchange="checkTotal()"/><br>

<input type="text" name="Item2cost" value="5" >5
<input type="checkbox" name="choice" value="Item2cost " onchange="checkTotal()"/><br>

<input type="text" name="Item3cost " value="5" >5 
<input type="checkbox" name="choice" value="Item3cost" onchange ="checkTotal()"/> <br>

<input type="test" name="Item4cost" value="20">20
<input type="checkbox" name="choice" value="Item4cost" onchange="checkTotal()"/> <br>

Total: <input type="text" size="4" name="total" value="0"/>
</form>
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      it’s a wrong assumption that you can in the value reference a number from another element.
      Code:
      <input type="text" name="Item1cost" value="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.

        Comment

        • jamming
          New Member
          • Nov 2011
          • 9
          #3
          I'm sorry, I don't understand. Can you give me an example? Thanks.

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              taking the snippet from above:
              Code:
              var box = document.getElementsByName("choice")[0];
alert(box.value);
var txt = document.getElementsByName(box.value)[0];
alert(txt.value);

// or
var box = document.listForm.choice[0];
var txt = document.listForm[box.value]; // since there is only one such name
alert(txt.value);

                Comment

                • jamming
                  New Member
                  • Nov 2011
                  • 9
                  #5
                  Thanks so much. It makes so much sense once you showed me how to do it..

                    Comment

                    • jamming
                      New Member
                      • Nov 2011
                      • 9
                      #6
                      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.

                      Code:
                      <html>
<head>
<script type="text/javascript">
function checkTotal() {
	document.listForm.total.value = '';
    var sum = 0;
    for (i=0;i<document.listForm.choice.length;i++) {
	 	if (document.listForm.choice[i].checked) {
	var box = (document.listForm.choice[i]);
		alert(box.value);
	var txt = (document.listForm[box.value]); 
	       alert(txt.value);
	sum = sum + parseInt(txt.value) ;	
	       alert(sum);
   		}
	}
     document.listForm.total.value = sum;
}
</script>

<form name="listForm">
<input type="text" name="Item1cost" value="2" >2
<input type="checkbox" name="choice" value="Item1cost" onChange="checkTotal()"/><br>
 
<input type="text" name="Item2cost" value="5" >5
<input type="checkbox" name="choice" value="Item2cost" onChange="checkTotal()"/><br>
 
<input type="text" name="Item3cost" value="5" >5 
<input type="checkbox" name="choice" value="Item3cost" onchange ="checkTotal()"/> <br>
 
<input type="test" name="Item4cost" value="20">20
<input type="checkbox" name="choice" value="Item4cost" onChange="checkTotal()"/> <br>
 
Total: <input type="text" size="10" name="total" value="0"/>
</form>
</body>
</html>
                      Last edited by jamming; Nov 22 '11, 08:15 AM. Reason: updated code; finally got it working.

                        Comment

                        Previous template Next
                        Working...