Selecting a radio button

[tomb]

I am retrieving data through AJAX, and all my data elements are being
populated beautifully, except my radio button. If the value retrieved
is the first one, it gets selected, but if it's the second or third,
they are ignored and none of them gets selected. Can someone enlighten
me as to how the correct one gets selected?

pairs[0] represents the element id.
I currently have this in my js code:
if(f.type == 'radio'){
if(f.value == pairs[1]){
f.checked = true;
}

}

Thank you.

Tom

 

[Thomas 'PointedEars' Lahn]

I am retrieving data through AJAX, and all my data elements are being
populated beautifully, except my radio button. If the value retrieved
is the first one, it gets selected,

Probably it doesn't and it was checked by default.

but if it's the second or third,

You mean if there is more than one radio button? Because, if we assume that
`f' refers to a form control, that is when your code is supposed to fail as
radio buttons are grouped by `name' attribute, and their corresponding DOM
objects are items of a NodeList then.

they are ignored and none of them gets selected. Can someone enlighten
me as to how the correct one gets selected?

pairs[0] represents the element id.

pairs[0] doesn't even occur in the posted snippet.

I currently have this in my js code:
if(f.type == 'radio'){
if(f.value == pairs[1]){
f.checked = true;
}

}

You don't say what `f' is, your code style is beyond good and evil (*11*
*tabs* for indentation!), you haven't RTFM or STFW, and you haven't checked
the error console. Try again.

<http://jibbering.com/faq/#posting>


PointedEars

 

[SAM]

Le 4/29/09 11:19 PM, tomb a écrit :

I am retrieving data through AJAX, and all my data elements are being
populated beautifully, except my radio button. If the value retrieved
is the first one, it gets selected, but if it's the second or third,
they are ignored and none of them gets selected. Can someone enlighten
me as to how the correct one gets selected?

pairs[0] represents the element id.

I think a group of radio-buttons have same 'name', no ?
What the 'id' has to do with the problem ?

Why do you make a condition on the "value" with the name of "id" ?

I currently have this in my js code:
if(f.type == 'radio'){
if(f.value == pairs[1]){
f.checked = true;
}

if(f.type == 'radio') f.checked = (f.id == pairs[1]);

 

[tomb]

I am retrieving data through AJAX, and all my data elements are being
populated beautifully, except my radio button. If the value retrieved
is the first one, it gets selected,

Probably it doesn't and it was checked by default.

but if it's the second or third,

You mean if there is more than one radio button? Because, if we assume that
`f' refers to a form control, that is when your code is supposed to fail as
radio buttons are grouped by `name' attribute, and their corresponding DOM
objects are items of a NodeList then.

they are ignored and none of them gets selected. Can someone enlighten
me as to how the correct one gets selected?

pairs[0] represents the element id.

pairs[0] doesn't even occur in the posted snippet.

I currently have this in my js code:
if(f.type == 'radio'){
if(f.value == pairs[1]){
f.checked = true;
}

}

You don't say what `f' is, your code style is beyond good and evil (*11*
*tabs* for indentation!), you haven't RTFM or STFW, and you haven't checked
the error console. Try again.

<http://jibbering.com/faq/#posting>


PointedEars

Criticism of coding style and the number of tabs in a line, is far from
enlightening. I'm sorry to bother you, but I don't have a manual. And
the source online that I do have I have no idea how to even approach the
issue to look it up. Maybe the difficulty for you was understanding
what my issue is in the first place. So I'll rephrase it for you. I
don't know how to cause the correct radio button to be selected after
retrieving a value from the database. There - no code to critique, just
a simple question.

 

[tomb]

tomb wrote:
I am retrieving data through AJAX, and all my data elements are being
populated beautifully, except my radio button. If the value retrieved
is the first one, it gets selected,
Probably it doesn't and it was checked by default.
but if it's the second or third,
You mean if there is more than one radio button? Because, if we assume that
`f' refers to a form control, that is when your code is supposed to fail as
radio buttons are grouped by `name' attribute, and their corresponding DOM
objects are items of a NodeList then.
they are ignored and none of them gets selected. Can someone enlighten
me as to how the correct one gets selected?
pairs[0] represents the element id.
pairs[0] doesn't even occur in the posted snippet.
I currently have this in my js code:
if(f.type == 'radio'){
if(f.value == pairs[1]){
f.checked = true;
}
}
You don't say what `f' is, your code style is beyond good and evil (*11*
*tabs* for indentation!), you haven't RTFM or STFW, and you haven't checked
the error console. Try again.
<http://jibbering.com/faq/#posting>
PointedEars

Criticism of coding style and the number of tabs in a line, is far from
enlightening. I'm sorry to bother you, but I don't have a manual. And
the source online that I do have I have no idea how to even approach the
issue to look it up. Maybe the difficulty for you was understanding
what my issue is in the first place. So I'll rephrase it for you. I
don't know how to cause the correct radio button to be selected after
retrieving a value from the database. There - no code to critique, just
a simple question.

In the HTML use something like:

<input id="polar1" name="pol" type="radio" value="v" checked="checked"
onclick="availCalc()" />Vertical
<input id="polar2" name="pol" type="radio" value="h" onclick="availCalc
()" />Horizontal

And in the JavaScript refer to the name like this:

if (document.coords.pol.checked) {
polar = document.coords.pol.value;
}

Regards, Steve.

Thanks, Steve. That's almost what I need. I actually need the reverse
- if I have 3 radios named "timing", each with a different value, say
10, 12, 14, and my data comes back as 12, how do I make the second radio
be selected? The id of all 3 is also "timing" because the selected
value will be put back to the database if the user changes it.

I've tried this for loop:

f is initialized through document.getElementById('timing');
for(var i=0; i<f.length; i++){ if(f.value ==
thevalue){ f.checked = "checked"; } }

but it isn't working. f.value comes up as undefined. I'm obviously
missing something.

Tom

 

[SAM]

Le 4/30/09 3:15 PM, tomb a écrit :

Thanks, Steve. That's almost what I need. I actually need the reverse
- if I have 3 radios named "timing", each with a different value, say
10, 12, 14, and my data comes back as 12, how do I make the second radio
be selected? The id of all 3 is also "timing" because the selected
value will be put back to the database if the user changes it.

Certainly not the 'id' but only the 'name', no?

An id *must* be unique ! ! !

I've tried this for loop:

f is initialized through document.getElementById('timing');

That can't works.
Why ?
Because that will get only the first button.

Why ?
Because ids are unique, as said above.

You could do :

var f;
if(document.getElementsByName)
f = document.getElementsByName('timing');

if(f && f.length>0)
{
for(var i=0; i<f.length; i++)
{
if(f.value == thevalue)
{
f.checked = "checked";
break;
}
}
}
else alert('error, f is '+f);

for(var i=0; i<f.length; i++){
if(f.value == thevalue){ f.checked
= "checked"; } }

but it isn't working. f.value comes up as undefined. I'm obviously
missing something.

where was set 'thevalue' ?


You can preferably use the tree of forms :

<form name="myForm" action="myDatas.php">
<p>Choice:
10:<input type="radio" name="mind" value="10">
12:<input type="radio" name="mind" value="12">
14:<input type="radio" name="mind" value="14">
....
</form>

<script type="text/javascript">
var thevalue = '<?php echo $thevalue ?>';
// for test (to delette when that works)
alert('thevalue = '+thevalue);
var r = document.forms['myForm'].elements['mind'],
n = r.length;
if(n) while(n--) if(thevalue == r[n].value)
{
r[n].checked = true;
break;
}
</script>


But the best would be that the server writes the correct code, no ?

print ("<form name='myForm' action='myDatas.php'>
<p>Choice:
10:<input type='radio' name='mind' value='10'>
12:<input type='radio' name='mind' value='12' checked>
14:<input type='radio' name='mind' value='14'>");

 

[SAM]

Le 4/30/09 4:51 PM, SteveYoungGoogle a écrit :

Sorry that won't work because the names are automatically radio[0],
radio[1],radio[2] etc.

Therefore you will have to convert your returnValue data into 0,1,2
etc. But I'm sure you get the idea.

perhaps ... perhaps

but
document.form.radio
is the collection of elements named 'radio' in the form named 'form'

so
radio[0]
is not the 'name' of first element named 'radio'
it could only be the 1st element of the collection seen above :
document.form.radio[0]


var returnvalue = '<?= $thevalue ?>';
if(returnvalue>0)
{
switch(returnvalue)
{
case '10': returnvalue = 0; break;
case '12': returnvalue = 1; break;
case '14': returnvalue = 2; break;
}
document.form.radio[returnvalue].checked = true;
}
else alert('error radios are '+returnvalue);

 

[David Mark]

Thomas 'PointedEars' Lahn wrote:
tomb wrote:
I am retrieving data through AJAX, and all my data elements are being
populated beautifully, except my radio button.  If the value retrieved
is the first one, it gets selected,
Probably it doesn't and it was checked by default.
but if it's the second or third,
You mean if there is more than one radio button?  Because, if we assume that
`f' refers to a form control, that is when your code is supposed tofail as
radio buttons are grouped by `name' attribute, and their corresponding DOM
objects are items of a NodeList then.
they are ignored and none of them gets selected.  Can someone enlighten
me as to how the correct one gets selected?
pairs[0] represents the element id.
pairs[0] doesn't even occur in the posted snippet.
I currently have this in my js code:
if(f.type == 'radio'){
                                                                                      if(f.value == pairs[1]){
                                                                                              f.checked = true;
                                                                                      }
}
You don't say what `f' is, your code style is beyond good and evil (*11*
*tabs* for indentation!), you haven't RTFM or STFW, and you haven'tchecked
the error console.  Try again.
<http://jibbering.com/faq/#posting>
PointedEars
Criticism of coding style and the number of tabs in a line, is far from
enlightening.  I'm sorry to bother you, but I don't have a manual. And
the source online that I do have I have no idea how to even approachthe
issue to look it up.  Maybe the difficulty for you was understanding
what my issue is in the first place.  So I'll rephrase it for you. I
don't know how to cause the correct radio button to be selected after
retrieving a value from the database.  There - no code to critique, just
a simple question.
In the HTML use something like:
<input id="polar1" name="pol" type="radio" value="v" checked="checked"
onclick="availCalc()" />Vertical
<input id="polar2" name="pol" type="radio" value="h" onclick="availCalc
()" />Horizontal
And in the JavaScript refer to the name like this:
if (document.coords.pol.checked) {
    polar = document.coords.pol.value;
}
Regards, Steve.

Thanks, Steve.  That's almost what I need.  I actually need the reverse
- if I have 3 radios named "timing", each with a different value, say
10, 12, 14, and my data comes back as 12, how do I make the second radio
be selected?  The id of all 3 is also "timing" because the selected
value will be put back to the database if the user changes it.

I've tried this for loop:

f is initialized through document.getElementById('timing');
for(var i=0; i<f.length; i++){                                                              if(f.value ==
thevalue){                                                              f.checked= "checked";                                            }                                                                      }

but it isn't working.  f.value comes up as undefined.  I'm obviously
missing something.

Tom

Simply name the 3 selections "radio10", "radio12" and "radio14" and
make the data that comes back into a variable such as "returnValue".
Then select the radio selection with:

document.form.radio[returnValue].checked="true"

Do not use those shortcuts.

document.forms.form.elements.radio[returnValue] ...

 

[tomb]

Le 4/30/09 3:15 PM, tomb a écrit :

Thanks, Steve. That's almost what I need. I actually need the
reverse - if I have 3 radios named "timing", each with a different
value, say 10, 12, 14, and my data comes back as 12, how do I make the
second radio be selected? The id of all 3 is also "timing" because
the selected value will be put back to the database if the user
changes it.

Certainly not the 'id' but only the 'name', no?

An id *must* be unique ! ! !

I've tried this for loop:

f is initialized through document.getElementById('timing');

That can't works.
Why ?
Because that will get only the first button.

Why ?
Because ids are unique, as said above.

You could do :

var f;
if(document.getElementsByName)
f = document.getElementsByName('timing');

if(f && f.length>0)
{
for(var i=0; i<f.length; i++)
{
if(f.value == thevalue)
{
f.checked = "checked";
break;
}
}
}
else alert('error, f is '+f);

for(var i=0; i<f.length; i++){
if(f.value == thevalue){
f.checked = "checked";
} }

but it isn't working. f.value comes up as undefined. I'm
obviously missing something.

where was set 'thevalue' ?


You can preferably use the tree of forms :

<form name="myForm" action="myDatas.php">
<p>Choice:
10:<input type="radio" name="mind" value="10">
12:<input type="radio" name="mind" value="12">
14:<input type="radio" name="mind" value="14">
...
</form>

<script type="text/javascript">
var thevalue = '<?php echo $thevalue ?>';
// for test (to delette when that works)
alert('thevalue = '+thevalue);
var r = document.forms['myForm'].elements['mind'],
n = r.length;
if(n) while(n--) if(thevalue == r[n].value)
{
r[n].checked = true;
break;
}
</script>


But the best would be that the server writes the correct code, no ?

print ("<form name='myForm' action='myDatas.php'>
<p>Choice:
10:<input type='radio' name='mind' value='10'>
12:<input type='radio' name='mind' value='12' checked>
14:<input type='radio' name='mind' value='14'>");

Thank you! This was exactly what I was asking for.
The call to document.getElementsByName() did the trick - I KNEW I was
missing something. You are the best!

Tom

 

[SteveYoungTbird]

Then select the radio selection with:

document.form.radio[returnValue].checked="true"

Do not use those shortcuts.

document.forms.form.elements.radio[returnValue] ...

Why not?

 

[SAM]

Le 4/30/09 9:02 PM, tomb a écrit :

[snip]

Thank you! This was exactly what I was asking for.
The call to document.getElementsByName() did the trick - I KNEW I was
missing something. You are the best!

don't forgive to change the ids of your buttons
or directly suppress them (they are of no utility)

take care that it could be possible that a navigator could bad known
getElementsByName !

prefer always to use the forms tree :

var myRadios = document.forms[0].elements['timing'];

 

[Thomas 'PointedEars' Lahn]

document.form.radio[returnValue].checked="true"

Do not use those shortcuts.

document.forms.form.elements.radio[returnValue] ...

One should use bracket property accessors for HTMLCollections instead. And
one SHOULD NOT assign "true", of course (if the above works then that is
only due to a proprietary setter that might regard any non-empty string
value as boolean `true'):

document.forms["form"].elements["radio"][returnValue].checked = true;

<http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-30233917>


PointedEars

 

[David Mark]

document.form.radio[returnValue].checked="true"

Do not use those shortcuts.

document.forms.form.elements.radio[returnValue] ...

One should use bracket property accessors for HTMLCollections instead.

What would be the point of that?

 

[David Mark]

Then select the radio selection with:
document.form.radio[returnValue].checked="true"

Do not use those shortcuts.

document.forms.form.elements.radio[returnValue] ...

Why not?

Because they are non-standard shortcuts that create compatibility
issues.

 

[SteveYoungTbird]

On Apr 30, 10:43 am, SteveYoungGoogle <[email protected]>
wrote:
Then select the radio selection with:
document.form.radio[returnValue].checked="true"
Do not use those shortcuts.
document.forms.form.elements.radio[returnValue] ...

Why not?

Because they are non-standard shortcuts that create compatibility
issues.

Then to be consistent shouldn't it be -

window.document.forms.form.elements.radio[returnValue] .. ?

Would you be so kind as to point out a real compatibility issue or are
you only referring to potential compatibility issues?

Regards, Steve.

 

[Thomas 'PointedEars' Lahn]

SteveYoungGoogle wrote:
document.form.radio[returnValue].checked="true"
Do not use those shortcuts.
document.forms.form.elements.radio[returnValue] ...

One should use bracket property accessors for HTMLCollections instead.

What would be the point of that?

Because Web standards says so and not differently (in fact, for all
Collections, not just HTMLCollections), because of uniform references
(regardless of variable/property name or not, and Identifier-conforming
name or not), etc.

Take your pick.


PointedEars