Run Javascript to change value on RadioButtonList click

Question

Alright, so I'm writing a code that calculates a cost based on the values of three text boxes and the selection from a radiobuttonlist. The page uses ASP.net controls. The following script is run in the onBlur from each text box so that it updates the total and displays it in another texbox:

function calcTotal(form) {
var total = 0;

var sellingthings = $(form).find('.payable');

var adultLunch = $(form).find('.adultLunch');
var lunch1 = $(adultLunch).val();
var childLunch = $(form).find('.childLunch');
var lunch2 = $(childLunch).val();
var semTix = $(form).find('.seminarTix');
var tix = $(semTix).val();
var reg= $(form).find('.registration input:checked');
var regCost = $(reg).val();
//alert(regCost);

total = (10*lunch1 + 5*lunch2 + 40*tix + regCost*1);
var output = $(form).find('.total');
$(output).val(total);
} 

This code works on the textboxes to update the value in the .total field. However, the same code does not work right on the radiobuttonlist. The code for it is here:

<asp:RadioButtonList ID = "RegType" runat = "server" name="regType" onclick="calcTotal(this.form)">
    <asp:ListItem Value="50">Family ($50)</asp:ListItem>
    <asp:ListItem Value="35">Individual ($35)</asp:ListItem>
    <asp:ListItem Value="10">Student ($10)</asp:ListItem>
</asp:RadioButtonList>

Does anyone know why this might be or how I could fix it? Thanks!

Answer 1

I found a solution. In the Javascript, I used the following code:

$(document).ready(function () {
    $(".registration input").change(function () { calcTotal(document.forms[0]); });
});   

When the radiobutton input is changed at any point, it will run the calculation code. You can't add code to a radiobuttonlist, so you have to do it another way.