Getting correct value from radio button

[Bernie]

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,thisAgeAmount6);

function getPrice()
{
for (var i = 0; i < allAges.length; i++)
{
allAgesAmounts.value = "";
for (var j = 0; j < allAges.length; j++)
{
if (allAges[j].checked == true)
{
allAgesAmounts.value = allAges[j].value;
console.log(allAgesAmounts.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.

 

[SAM]

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.checked) f['ageAmount'+age].value = what.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;

 

[Bernie]

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.checked) f['ageAmount'+age].value = what.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;

Thanks for replying back, SM.
My next question to you is in the line - "var t = 0, L = (f.length-3)/
5; // or L = 6 for your example", where does the 3 and 5 come from?
What are they referencing? I understand that f.length is the total
amount of element in the form, but the 3 and 5 has me stumped.

Thanks

B

 

[SAM]

Bernie a écrit :

Thanks for replying back, SM.
My next question to you is in the line - "var t = 0, L = (f.length-3)/
5; // or L = 6 for your example", where does the 3 and 5 come from?
What are they referencing? I understand that f.length is the total
amount of element in the form, but the 3 and 5 has me stumped.

you have 5 inputs by line
you would have to have 3 inputs in end of your form
- total
- reset
- submit

L = the form length (numbers of its elements (input, textarea) )

As you have a sub-total in each line in 5th position
I do a loop (L-3)/5 times

If that disturb you, you can loop on the whole form
searching elements with 'ageAmount' in their names :

var t = 0;
for(var i=0, L=f.length; i<L; i++) {
if(f.name.indexOf('ageAmount')>=0) t += f.value*1:
}


does the name content 'ageAmount' ?
name.indexOf('ageAmount')>=0

 

[Bernie]

Bernie a écrit :

Thanks for replying back, SM.
My next question to you is in the line - "var t = 0, L = (f.length-3)/
5;  // or L = 6 for your example", where does the 3 and 5 come from?
What are they referencing?  I understand that f.length is the total
amount of element in the form, but the 3 and 5 has me stumped.

you have 5 inputs by line
you would have to have 3 inputs in end of your form
- total
- reset
- submit

L = the form length (numbers of its elements (input, textarea) )

As you have a sub-total in each line in 5th position
I do a loop  (L-3)/5  times

If that disturb you, you can loop on the whole form
searching elements with 'ageAmount' in their names :

var t = 0;
for(var i=0, L=f.length; i<L; i++) {
   if(f.name.indexOf('ageAmount')>=0) t += f.value*1:
   }

does the name content 'ageAmount' ?
   name.indexOf('ageAmount')>=0

No, that did not disturb me. I was just curious. Thanks again.