Ben Williams Ben Williams - 6 months ago 41
Javascript Question

Adding radio button values together dynamically

I'm trying to get a running total of values added together when a user selects a radio button. Currently it's just coming back as blank. Here's what I've got so far:

<script type="text/javascript">
function findTotal(){
var ntot = 0
var a = document.getElementsByName('ur').val();
var b = document.getElementsByName('haem').val();
var c = document.getElementsByName('haew').val();
var d = document.getElementsByName('syb').val();
var e = document.getElementsByName('orm').val();

var tot= ntot + a + b + c + d + e;

document.getElementById('total').value = tot;
}

</script>


And a cut down amount of radio buttons for example:

0 <input type="radio" name="ur" value="0" id="ur1" class="radi" onclick="findTotal()"/> <br />
2 <input type="radio" name="ur" value="2" id="ur2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="haem" value="0" id="haem1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="haem" value="1" id="haem2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="haew" value="0" id="haew1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" onclick="findTotal()" /> <br />

0 <input type="radio" name="syb" value="0" id="syb1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="syb" value="1" id="syb2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="orm" value="0" id="orm1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" onclick="findTotal()"/> <br />

Total: <input type="text" name="total" id="total"/>


Any help would be much appreciated.

Answer

getElementsByName(), as implied by the "s" in "elements", returns a list of elements. And that list doesn't have a .val() method or a .value property, nor does it select just the checked items.

But this is easy to do with jQuery. Remove all the inline onclick= handlers, then just bind the click handler with jQuery based on the common class.

You can quickly grab the checked radio buttons by using the :checked selector, then loop through them using the .each() method. I'm using the unary plus operator to convert the string values from the value attributes to numbers so that they can be added together.

$(".radi").click(function() {
  var total = 0;
  $(".radi:checked").each(function() { total += +this.value; });
  $("#total").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
0 <input type="radio" name="ur" value="0" id="ur1" class="radi"/> <br />
2 <input type="radio" name="ur" value="2" id="ur2" class="radi"/> <br />

0 <input type="radio" name="haem" value="0" id="haem1" class="radi"/><br />
1 <input type="radio" name="haem" value="1" id="haem2" class="radi"/> <br />

0 <input type="radio" name="haew" value="0" id="haew1" class="radi"/><br />
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" /> <br />

0 <input type="radio" name="syb" value="0" id="syb1" class="radi"/><br />
1 <input type="radio" name="syb" value="1" id="syb2" class="radi"/> <br />

0 <input type="radio" name="orm" value="0" id="orm1" class="radi"/><br />
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" /> <br />

Total: <input type="text" name="total" id="total"/>

Comments