Getting correct value from radio button

Hello all,

I am new to the group and new to javascripting, so I am hoping to find
some good help here.

Here is a snippet of my code:

HTML:
Name: <input type="text" name="ageName0" id="ageName0" />
<input type="radio" value="0" name="age0" onclick="getPrice();" /> 6
and under
<input type="radio" value="20" name="age0" onclick="getPrice();" /> 7
to 12
<input type="radio" value="50" name="age0" onclick="getPrice();" /> 13
and over
Amount: $ <input type="text" name="ageAmount0" id="ageAmount0" /><br>
....
....
Name: <input type="text" name="ageName6" id="ageName6" />
<input type="radio" value="0" name="age6" onclick="getPrice();" /> 6
and under
<input type="radio" value="20" name="age6" onclick="getPrice();" /> 7
to 12
<input type="radio" value="50" name="age6" onclick="getPrice();" /> 13
and over
Amount: $ <input type="text" name="ageAmount6" id="ageAmount6" /><br>


javascript:
var allAges = new
Array(thisAge0,thisAge1,thisAge2,thisAge3,thisAge4 ,thisAge5,thisAge6);
var allAgesAmounts = new
Array(thisAgeAmount0,thisAgeAmount1,thisAgeAmount2 ,thisAgeAmount3,thisAgeAmount4,thisAgeAmount5,this AgeAmount6);

function getPrice()
{
for (var i = 0; i < allAges.length; i++)
{
allAgesAmounts[i].value = "";
for (var j = 0; j < allAges[i].length; j++)
{
if (allAges[i][j].checked == true)
{
allAgesAmounts[i].value = allAges[i][j].value;
console.log(allAgesAmounts[i].value);
}
}
}
....
....
}

The issue I am having is that when I click on the first set of radio
buttons, I am presented with 1 value, but if I click on the second set
of radio button, I am presented with 2 values instead of 1. The same
goes for the third, fourth, fifth and sixth where I a presented with
3, 4, 5 and 6 values, respectively.

You can see what I am referring to by going to this link
http://www.wootenfamilyreunion.org/6a.php.

Is there a way to stop this from happening?

Thanks for your time and patience.

Bernie a écrit :

Hello all,

I am new to the group and new to javascripting, so I am hoping to find
some good help here.

<form action="#">
Name: <input type="text" name="ageName0" id="ageName0" />
<input type="radio" value="0" name="age0" onclick="getPrice(this);" /> 6
and under
<input type="radio" value="20" name="age0" onclick="getPrice(this);" /> 7
to 12
<input type="radio" value="50" name="age0" onclick="getPrice(this);" /> 13
and over
Amount: $ <input type="text" name="ageAmount0" id="ageAmount0" /><br>

.....

Your Total = <input name="totalAmount" id="totalAmont"><br>
<input type=reset><input type=submit>
</form>


JS :
====

function getPrice(what) {
var f = what.form; // which form it is
var age = what.name; // name of the radio
what = f[age]; // collection of radios
age = age.substring(age.indexOf('e')+1); // number (index)
for(var i=0; i<what.length; i++)
if(what[i].checked) f['ageAmount'+age].value = what[i].value ;
total(f);
}
function total(f) {
var t = 0, L = (f.length-3)/5; // or L = 6 for your example
for(var i=0; i<L; i++) t += f['ageAmount'+i].value*1;
f.totalAmount.value = t;
}

The issue I am having is that when I click on the first set of radio
buttons, I am presented with 1 value, but if I click on the second set
of radio button, I am presented with 2 values instead of 1. The same
goes for the third, fourth, fifth and sixth where I a presented with
3, 4, 5 and 6 values, respectively.

the values of inputs are texts (type=text) and not numbers
so you add the values as texts
You must to convert them in numbers

var price = foo1.value *1 + foo2.value*1 + foo3.value*1;

--
sm