real time display of radio button input array

[chuck]

Hi,
This is a test for a larger form i am working on. I want to have a
real time
display of the radio button value when selected. I tried with various event
handlers with varying success. The code below works in mac/win firefox,
other browsers don't handle it at all. I have tried using onclick, and that
buggers it in all browsers.

<script type="text/javascript">
function updateSize()
{if(document.testform.size[0].checked==true)
document.getElementById('displaySize').innerHTML =
document.testform.size[0].value;

if(document.testform.size[1].checked==true)
document.getElementById('displaySize').innerHTML =
document.testform.size[1].value;
}

<form name="testform">
<input type="radio" id="1" name="size" value="1" onchange="updateSize();
return false;"><label for="1">1"</label><br />
<input type="radio" id="1.25" name="size" value="1.25"
onchange="updateSize(); return false;"><label for="1.25">1.25"</label>
</form>

<p>Size: <span id="displaySize"></span></p>

this site has something similar but has different names for each radio
button
and manually sets the opposite button checked = false. I don't want to do
this because this will cause problems with javascript disabled.
http://webmonkey.wired.com/webmonkey...tw=programming

How should i go about this?

chuck

[chuck]

> <script type="text/javascript">

function updateSize()
{if(document.testform.size[0].checked==true)
document.getElementById('displaySize').innerHTML =
document.testform.size[0].value;

if(document.testform.size[1].checked==true)
document.getElementById('displaySize').innerHTML =
document.testform.size[1].value;
} </script> <form name="testform">
<input type="radio" id="1" name="size" value="1" onchange="updateSize();
return false;"><label for="1">1"</label><br />
<input type="radio" id="1.25" name="size" value="1.25"
onchange="updateSize(); return false;"><label for="1.25">1.25"</label>
</form>

<p>Size: <span id="displaySize"></span></p> chuck

I left out the closing </script> tag in my message but it is in my code.

[Martin Kurz]

chuck schrieb:

Hi,
This is a test for a larger form i am working on. I want to have a
real time
display of the radio button value when selected. I tried with various
event
handlers with varying success. The code below works in mac/win firefox,
other browsers don't handle it at all. I have tried using onclick, and
that
buggers it in all browsers.

I tried with onlick too (in a little bit other way) and succeeded in tested
browsers (IE6, FF1.0.6 and Opera8 on win):
<script type="text/javascript">
function updateSize(element) {
document.getElementById('displaySize').innerHTML = element.value;
}
</script>

<form name="testform">
<input type="radio" id="1" name="size" value="1"
onclick="updateSize(this);"><label for="1">1"</label><br />
<input type="radio" id="1.25" name="size" value="1.25"
onclick="updateSize(this);"><label for="1.25">1.25"</label>
</form>

Beacuse Clicking on a radiobutton allways activates this button (unchecking is
only done by clicking another button in same group), I don't test the
checked-state. Clicking on the label fires (at least on tested browsers) an
onlick-event for the button too.

[RobG]

Martin Kurz wrote:

chuck schrieb:

Hi,
This is a test for a larger form i am working on. I want to have a
real time
display of the radio button value when selected. I tried with various
event
handlers with varying success. The code below works in mac/win firefox,
other browsers don't handle it at all. I have tried using onclick, and
that
buggers it in all browsers.

I tried with onlick too (in a little bit other way) and succeeded in tested
browsers (IE6, FF1.0.6 and Opera8 on win):
<script type="text/javascript">
function updateSize(element) {
document.getElementById('displaySize').innerHTML = element.value;
}
</script>

<form name="testform">
<input type="radio" id="1" name="size" value="1"

An id must start with a letter. It may contain numbers, but not as the
first character.
onclick="updateSize(this);"><label for="1">1"</label><br />
<input type="radio" id="1.25" name="size" value="1.25"
onclick="updateSize(this);"><label for="1.25">1.25"</label>
</form>
One radio button should always be checked by default.

Beacuse Clicking on a radiobutton allways activates this button (unchecking is
only done by clicking another button in same group), I don't test the
checked-state. Clicking on the label fires (at least on tested browsers) an
onlick-event for the button too.

Clicking on the label is equivalent to clicking on the input in all
browsers that follow the standard.

The label is associated with the input either by making the input part
of the content of the label or by using the label 'for' attribute.
Since IE doesn't implement the first method, the second must be used for
cross-browser consistency.
--
Rob