By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,665 Members | 1,761 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,665 IT Pros & Developers. It's quick & easy.

how to make function cover all possible radio buttons?

P: n/a
I Have to sets of Radio buttons like so:
<input type="radio" name=p1 value=1>
<input type="radio" name=p1 value=2>
<input type="radio" name=p1 value=3>
<br>
<input type="radio" name=p2 value=1>
<input type="radio" name=p2 value=2>
<input type="radio" name=p2 value=3>

then a text area and a button:
<input size=7 name=total>
<input type="button" onclick=c()>

the function checks for the radio buttons then outputs its value in text
area.
<script type="text/javascript">
function c()
{if (p1[a].checked&&p2[b].checked)
total.value=parseFloat(p1[a].value)+parseFloat(p2[b].value)
}</script>

my question is what is the possibility of giving values to a and b such as
all radio buttons can be covered, is there a way to do this without having
to output all cases with else if structure.


Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"Oscar Monteiro" <of**@hotmail.com> wrote in message
news:41*********************@news.telepac.pt...
I Have to sets of Radio buttons like so:
<input type="radio" name=p1 value=1>
<input type="radio" name=p1 value=2>
<input type="radio" name=p1 value=3>
<br>
<input type="radio" name=p2 value=1>
<input type="radio" name=p2 value=2>
<input type="radio" name=p2 value=3>

then a text area and a button:
<input size=7 name=total>
<input type="button" onclick=c()>

the function checks for the radio buttons then outputs its value in text
area.
<script type="text/javascript">
function c()
{if (p1[a].checked&&p2[b].checked)
total.value=parseFloat(p1[a].value)+parseFloat(p2[b].value)
}</script>

my question is what is the possibility of giving values to a and b such as
all radio buttons can be covered, is there a way to do this without having
to output all cases with else if structure.

Is this what you're looking for?

<html>
<head>
<title>radios.htm</title>
<script type="text/javascript">
function c() {
var form = document.form1;
var p1_a = 0;
var p2_b = 0;
for (var a=0; a<form.p1.length; a++) {
if (form.p1[a].checked) {
p1_a = parseFloat(form.p1[a].value);
}
}
for (var b=0; b<form.p2.length; b++) {
if (form.p2[b].checked) {
p2_b = parseFloat(form.p2[b].value);
}
}
if (p1_a > 0 && p2_b > 0) {
form.total.value = p1_a + p2_b;
} else {
form.total.value = "";
}
}
</script>
</head>
<body>
<form action="" method="post" name="form1">
<input type="radio" name="p1" value="1">
<input type="radio" name="p1" value="2">
<input type="radio" name="p1" value="3">
<br>
<input type="radio" name="p2" value="1">
<input type="radio" name="p2" value="2">
<input type="radio" name="p2" value="3">
<br>
<input size="7" name="total">
<input type="button" onclick="c()">
</form>
</body>
</html>
Jul 23 '05 #2

P: n/a
Oscar Monteiro wrote:
my question is what is the possibility of giving values to a and b
such as all radio buttons can be covered, is there a way to do this
without having to output all cases with else if structure.
Here is an example to play with

<script type="text/javascript">
function radioValue(oRadio) {
if (oRadio && !oRadio.length && oRadio.value)
return oRadio.checked? oRadio.value : 0;
else if (oRadio && oRadio.length)
for (var i=0; i<oRadio.length; i++)
if (oRadio[i].checked && oRadio[i].value)
return oRadio[i].value;
return 0;
}
function rAdd(aRadios) {
var nSum = 0;
if (aRadios && aRadios.length)
for (var i=0; i<aRadios.length; i++) {
var nVal = parseInt(radioValue(aRadios[i]));
if (!isNaN(nVal)) nSum += nVal;
}
return nSum;
}
</script>
<form action=""><p>
P1 <input type="radio" name="p1" value="1">1
<input type="radio" name="p1" value="2">2
<input type="radio" name="p1" value="3">3<br>
P2 <input type="radio" name="p2" value="1">1
<input type="radio" name="p2" value="2">2
<input type="radio" name="p2" value="3">3<br>
<input size="7" name="total">
<input type="button" value="Add"
onclick="this.form.total.value = rAdd([this.form.p1, this.form.p2])"

</p></form>

ciao, dhgm
Jul 23 '05 #3

P: n/a


Oscar Monteiro <of**@hotmail.com> wrote in message
news:41*********************@news.telepac.pt...

my question is what is the possibility of giving values to a and b such as
all radio buttons can be covered, is there a way to do this without having
to output all cases with else if structure.


Loop through all elements and sum the values of those with type radio that
are checked.

For a form called 'f1' with a total field called 'total', call with:

<input type="button" onclick="addRad(document.f1, document.f1.total)">
<SCRIPT type="text/javascript">

function addRad(frm, resultHolder)
{
var elems = frm.elements,
fl = frm.elements.length,
total = 0;

for(var i=0; i<fl; i++)
if(elems[i].type=='radio' && elems[i].checked && !isNaN(elems[i].value))
total+=parseFloat(elems[i].value);

resultHolder.value=total;
}

</SCRIPT>
</BODY>
</HTML>

--
S.C.
http://makeashorterlink.com/?H3E82245A


Jul 23 '05 #4

P: n/a
Oscar Monteiro wrote:
I Have to sets of Radio buttons like so:
Hey, what a party, can I join in? :-)
<input type="radio" name=p1 value=1>
<input type="radio" name=p1 value=2>
<input type="radio" name=p1 value=3>
<br>
<input type="radio" name=p2 value=1>
<input type="radio" name=p2 value=2>
<input type="radio" name=p2 value=3>

then a text area and a button:
<input size=7 name=total>
<input type="button" onclick=c()>
*All* attributes should be quoted:

<input type="radio" name="p1" value="1">
...

According to the HTML spec, one button in a set of radio buttons
should always be selected and suggests browsers make the first
selected if none are set to "checked". Therefore you should
either make one selected, perhaps adding a "0" button as the
default.

Note that once a user selects one button in a set, they can't
(with your code) de-select a value even though the page when
loaded likely has no buttons selected.

[...] total.value=parseFloat(p1[a].value)+parseFloat(p2[b].value)
There is no need to use parseFloat, you have set the values so
just use them (unless you expect errors in your code). To
convert the form element value (always passed as a string) to a
number, use "+" which, in the your code, would be:

total.value = +p1[a].value + p2[b].value;

or in mine:

total += +arguments[i][j].value;

You also can't access the form element "total" that way in
browsers other than IE. In your code, presuming you have named
your form "formName", it should be:

document.forms['formName'].elements['total'].value...

which can be abbreviated (provided there are no special
characters in the names) to:

document.formName.total.value...

The form should have a reset button and the text area should be
given a default value - if you don't want users messing with it,
make it readonly too.

[...] my question is what is the possibility of giving values to a and b such as
all radio buttons can be covered, is there a way to do this without having
to output all cases with else if structure.


Yes - but you don't need any values for a & b. The solution
below takes references to as many button sets as you like. The
other posters have various solutions, mine, of course, is better
because:

1. You can pass as many sets of radio buttons as you like, no
limit.

2. It only adds the sets you pass, not all of them.

3. It is concise, requiring minimal use of DOM so should be
pretty good cross-browser-wise.

It is based on passing references to the sets of buttons you
want added.
<html><head><title>radio add</title>
<script type="text/javascript">
function c() {
var total = 0;
for ( var i=0, argLen = arguments.length; i<argLen; i++){
for (var j=0, setLen=arguments[i].length; j<setLen; j++){
if (arguments[i][j].checked) {
total += +arguments[i][j].value;
}
}
}
return total;
}
</script>
</head><body>

<form name="form1" action="">
<input type="radio" name="p1" value="0" checked>0
<input type="radio" name="p1" value="1">1
<input type="radio" name="p1" value="2">2
<input type="radio" name="p1" value="3">3
<br>
<input type="radio" name="p2" value="0" checked>0
<input type="radio" name="p2" value="1">1
<input type="radio" name="p2" value="2">2
<input type="radio" name="p2" value="3">3

<input size="7" name="total" readonly>
<input type="button" value="Add 'em" onclick="
this.form.total.value = c(this.form.p1, this.form.p2);
">
</form>

</body>
</html>

Hope that helps!! :-p

--
Rob
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.