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
