Summing radio input values

Question

I m new to this so I have been trying to adapt code from others to suit my needs  I need a radio selection from the first name group to be added to the second name group and then displayed in the text box at the bottom   Nothing appears in the bottom text box  Where am I going wrong   Javascript      input type radio    click function          var total   0         input type radio  checked   each function                  total    parseFloat   this  val                      totalSum   val total         HTML    lt strong gt Choose a base package  lt  strong gt   lt input id  item 0  type  radio  name  pkg  value  1942    gt Base Package 1 -  1942  lt input id  item 1  type  radio  name  pkg  value  2313    gt Base Package 2 -  2313  lt input id  item 2  type  radio  name  pkg  value  2829    gt Base Package 3 -  2829  lt strong gt Choose an add on  lt  strong gt   lt input id  item 10  type  radio  name  ext  value  0    gt No add-on -   0  lt input id  item 12  type  radio  name  ext  value  2146    gt Add-on 1 -    2146   lt input id  item 13  type  radio  name  ext  value  2455    gt Add-on 2 -    2455   lt input id  item 14  type  radio  name  ext  value  2764    gt Add-on 3 -    2764   lt input id  item 15  type  radio  name  ext  value  3073    gt Add-on 4 -    3073   lt input id  item 16  type  radio  name  ext  value  3382    gt Add-on 5 -    3382   lt input id  item 17  type  radio  name  ext  value  3691    gt Add-on 6 -    3691   lt strong gt Your total is  lt  strong gt   lt input id  totalSum  type  text  name  totalSum  readonly  readonly  size  5  value      gt

User · Accepted Answer

Your javascript is executed before the HTML is generated, so it doesn't "see" the ungenerated INPUT elements. For jQuery, you would either stick the Javascript at the end of the HTML or wrap it like this:

<script type="text/javascript">   $(function() { //jQuery trick to say after all the HTML is parsed.     $("input[type=radio]").click(function() {       var total = 0;       $("input[type=radio]:checked").each(function() {         total += parseFloat($(this).val());       });        $("#totalSum").val(total);     });   }); </script>

EDIT: This code works for me

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body>   <strong>Choose a base package:</strong>   <input id="item_0" type="radio" name="pkg" value="1942" />Base Package 1 - $1942   <input id="item_1" type="radio" name="pkg" value="2313" />Base Package 2 - $2313   <input id="item_2" type="radio" name="pkg" value="2829" />Base Package 3 - $2829   <strong>Choose an add on:</strong>   <input id="item_10" type="radio" name="ext" value="0" />No add-on - +$0   <input id="item_12" type="radio" name="ext" value="2146" />Add-on 1 - (+$2146)   <input id="item_13" type="radio" name="ext" value="2455" />Add-on 2 - (+$2455)   <input id="item_14" type="radio" name="ext" value="2764" />Add-on 3 - (+$2764)   <input id="item_15" type="radio" name="ext" value="3073" />Add-on 4 - (+$3073)   <input id="item_16" type="radio" name="ext" value="3382" />Add-on 5 - (+$3382)   <input id="item_17" type="radio" name="ext" value="3691" />Add-on 6 - (+$3691)   <strong>Your total is:</strong>   <input id="totalSum" type="text" name="totalSum" readonly="readonly" size="5" value="" />   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>   <script type="text/javascript">       $("input[type=radio]").click(function() {         var total = 0;         $("input[type=radio]:checked").each(function() {           total += parseFloat($(this).val());         });          $("#totalSum").val(total);       });     </script> </body> </html>

[javascript] Summing radio input values

Examples related to javascript