SUM radio button values and checkboxes values in one calculation - javascript and html

Question

I am trying to calculate the values of radio buttons and checkboxes. I have the radio buttons working as required but cannot get the script right for the checkboxes. I want the

Answer 1

In Javascript if there is single texbox of a specific name then length function will be return undefined.

Here you can do two things.

First there is only single field of subtotal so u can assign value direct to val4 like given below

val4 = document.form4.price4.value;

Second If you want to run for loop then

  var val4 = 0;
  var form4 = document.form4.getElementsByTagName('input');
  for( i = 0; i < form4.length; i++ ){
       if(form4[i].type == 'text' && form4[i].name == 'price4'){
          if(isNaN(parseInt(form4[i].value)) == false){
               val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
           }
       }

    }

Edited

In function

<script language="JavaScript" type="text/javascript">
      var total = document.getElementById("price4")
       function clickCh(caller){
           if(caller.checked){
             add(caller)
            } else {
           subtract(caller)
            }
            finalResult();
         }
       function add(caller){   total.value = total.value*1 + caller.value*1}
       function subtract(caller){  total.value = total.value*1 - caller.value*1}
        function finalResult(){
           var val1 = 0;
           for( i = 0; i < document.form1.price.length; i++ ){
             if( document.form1.price[i].checked == true ){
                 val1 = document.form1.price[i].value;
              }
             }

         var val2 = 0;
        for( i = 0; i < document.form2.price2.length; i++ ){
           if( document.form2.price2[i].checked == true ){
                val2 = document.form2.price2[i].value;
           }
          }

          var val3 = 0;
          for( i = 0; i < document.form3.price3.length; i++ ){
          if( document.form3.price3[i].checked == true ){
                    val3 = document.form3.price3[i].value;
           }
           }

           var val4 = 0;
          var form4 = document.form4.getElementsByTagName('input');
          for( i = 0; i < form4.length; i++ ){
           if(form4[i].type == 'text' && form4[i].name == 'price4'){
               if(isNaN(parseInt(form4[i].value)) == false){
                   val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
                 }
             }

            }

            var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
            document.getElementById('valueTotal').value=sum;
        } 
    </script>

i hope it will be work for you

thanks

Answer 2

In your code you are trying to add value of "price4" which is blank at start.... try adding value of "valueTotal" which is total of radiobuttons value

Try this code... same code with some modifications

<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
 <p>
 <input id="rdo_1" type="radio" value="3" name="price" onclick="DisplayPrice(this.value);"><label
      for="radio1">Radio 1</label></p>
  <p>
     <input id="rdo_2" type="radio" value="2" name="price" onclick="DisplayPrice(this.value);"><label
      for="radio2">Radio 2</label></p>
  <p>
      <input id="rdo_2" type="radio" value="1" name="price" onclick="DisplayPrice(this.value);"><label
      for="radio3">Radio 3</label></p>
  </form>
  <hr>
   <form name="form2" id="form2" runat="server">
    <legend>Header 2</legend>
   <p>
  <input id="rdo_1" type="radio" value="100" name="price2" onclick="DisplayPrice(this.value);"><label
      for="rad1">Radio 1</label></p>
   <p>
   <input id="rdo_2" type="radio" value="200" name="price2" onclick="DisplayPrice(this.value);"><label
      for="rad2">Radio 2</label></p>
    </form>
   <hr>
    <form name="form3" id="form3" runat="server">
    <legend>Header 3</legend>
    <p>
 <input id="rdo_1" type="radio" value="3" name="price3" onclick="DisplayPrice(this.value);"><label
      for="ra1">Radio 1</label></p>
      <p>
 <input id="rdo_2" type="radio" value="2" name="price3" onclick="DisplayPrice(this.value);"><label
      for="ra2">Radio 2</label></p>
   <p>
   <input id="rdo_2" type="radio" value="1" name="price3" onclick="DisplayPrice(this.value);"><label
      for="ra3">Radio 3</label></p>
   </form>
   <hr>
   <form name="checkboxCalc" id="checkboxCalc">
   <p>
   <input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01"
      value="300" /><label for="check01">Check 1</label></p>
    <p>
     <input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG"
      id="check02" value="200" /><label for="check02">Check 2</label></p>
    <p>
     <input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG"
      id="check03" value="200" /><label for="check03">Check 3</label></p>
     </form>
     <br />
     <form name="form4" id="form4" runat="server">
     <label for="check01">
 Sub Total:&nbsp;</label><input id="price4" type="text" name="price4" readonly="readonly">
     </form>
     <p>
     <label for="valueTotal">
      Value$:</label>
     <input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
     <script language="JavaScript" type="text/javascript">
 var total = document.getElementById("valueTotal")
 var result = document.getElementById("price4")
 function clickCh(caller)
 {
      if (caller.checked)
      {
           add(caller)
      } else
      {
           subtract(caller)
      }
 }
 function add(caller) { result.value = total.value * 1 + caller.value * 1 }
 function subtract(caller) { result.value = result.value * 1 - caller.value * 1 }
 </script>
 <hr>
 <script type="text/javascript">
 function DisplayPrice(price)
 {
      var val1 = 0;
      for (i = 0; i < document.form1.price.length; i++)
      {
           if (document.form1.price[i].checked == true)
           {
                val1 = document.form1.price[i].value;
           }
      }

      var val2 = 0;
      for (i = 0; i < document.form2.price2.length; i++)
      {
           if (document.form2.price2[i].checked == true)
           {
                val2 = document.form2.price2[i].value;
           }
      }

      var val3 = 0;
      for (i = 0; i < document.form3.price3.length; i++)
      {
           if (document.form3.price3[i].checked == true)
           {
                val3 = document.form3.price3[i].value;
           }
      }

      var val4 = 0;
      for (i = 0; i < document.form4.price4.length; i++)
      {
           val4 = document.form4.price4[i].value;
      }

      var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
      document.getElementById('valueTotal').value = sum;
 }
   </script>

Thank you. hope it will work