Javascript Input Radio Array?

  • HornyShauny
  • Newbie
  • Newbie
  • HornyShauny
  • Posts: 12
  • Loc: Exeter, Devo, England

Post 3+ Months Ago

Hi Guys, I have what i think is a simple question, but it just doesn't work. take the following HTML

Code: [ Select ]
<tr id='basic' bgcolor='#FFFFFF'><td>
<input type="radio" id="opt_tye" name="opt_tye" onclick="seton('basic',0);">
<tr id='ote' bgcolor='#FFFFFF'><td>
<input type="radio" id="opt_tye" name="opt_tye" onclick="seton('ote',1);">
<tr id='hourly' bgcolor='#FFFFFF'><td>
<input type="radio" id="opt_tye" name="opt_tye" onclick="seton('hourly',2);">
  1. <tr id='basic' bgcolor='#FFFFFF'><td>
  2. <input type="radio" id="opt_tye" name="opt_tye" onclick="seton('basic',0);">
  3. </td></tr>
  4. <tr id='ote' bgcolor='#FFFFFF'><td>
  5. <input type="radio" id="opt_tye" name="opt_tye" onclick="seton('ote',1);">
  6. </td></tr>
  7. <tr id='hourly' bgcolor='#FFFFFF'><td>
  8. <input type="radio" id="opt_tye" name="opt_tye" onclick="seton('hourly',2);">
  9. </td></tr>

and the javascript funtion

Code: [ Select ]
function seton(row,opt){
  srcf = document.getElementById('opt_tye');

  srcf[0].checked = false;
  srcf[1].checked = false;
  srcf[2].checked = false;

  document.getElementById(row).bgcolor = '#EEEEEE';
  srcf[opt].checked = true;
  1. function seton(row,opt){
  2.   srcf = document.getElementById('opt_tye');
  3.   srcf[0].checked = false;
  4.   srcf[1].checked = false;
  5.   srcf[2].checked = false;
  6.   document.getElementById(row).bgcolor = '#EEEEEE';
  7.   srcf[opt].checked = true;
  8. }

and the error

Code: [ Select ]
srcf.0 has not properties

Does any one have any idea's I was under the impression that like a select field the radio field with the same name would become an array '[]' but im at a lost at this one.. Also I know as well as you do i could do
Code: [ Select ]
but then i might as well spend an hour writing a browser checker to see if i need
Code: [ Select ]

So any ideas on radio input arrays and GetElementByID;

P.S Please don't just debug the code above as i have just written it by hand in this window from memory.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

getElementById is going to return a reference to an individual element, not to the array that the browser creates when you give a group of elements the same name. Also id's must be unique unlike names. You don't need to test for document.all to access the forms collections, so I don't think you'll have a problem retrieving a reference to the array like this:

Code: [ Select ]
srcf = document.forms[0].elements["opt_tye"];

// edit

I was thinking about this a bit more and I'm not sure you would need access to the array to do what you want if you passed this as an argument to the function instead of an integer:
Code: [ Select ]
<input type="radio" name="opt_tye" onclick="seton('basic', this);">

Code: [ Select ]
function seton(row, opt){
  document.getElementById(row).bgColor = '#EEEEEE';
  opt.checked = true;
  1. function seton(row, opt){
  2.   document.getElementById(row).bgColor = '#EEEEEE';
  3.   opt.checked = true;
  4. }

When I tested this and set the value of one radio button programatically the browsers (IE 6, FF1.0.4 and Opera 8 ) automatically set the other buttons in the group to false.

I was trying to think of a way to get the radio group array with DOM methods if that's what you really wanted to do. I don't think that array is part of the DOM (I'd be happy to be corrected if I'm wrong), so the best I could come up with was to make a function that would get a NodeList of all the input elements and then check them for their name attributes to build and return an array of the group in question:

Code: [ Select ]
function getRadioArray(groupName) {
  var retval = new Array();
  var nodeList = document.getElementsByTagName("input");
  for(var i = 0; i < nodeList.length; i++) {
    if(nodeList.item(i).name == groupName) retval[i] = nodeList.item(i);
  return retval;
  1. function getRadioArray(groupName) {
  2.   var retval = new Array();
  3.   var nodeList = document.getElementsByTagName("input");
  4.   for(var i = 0; i < nodeList.length; i++) {
  5.     if(nodeList.item(i).name == groupName) retval[i] = nodeList.item(i);
  6.   }
  7.   return retval;
  8. }

then you could call it with:

Code: [ Select ]
var srcf = getRadioArray("opt_tye");


Code: [ Select ]
var srcf = getRadioArray(;

if you were passing this into the opt parameter

I'm sure it's just a typo, but don't forget to use camelCase for .bgColor
  • hinnerup
  • Born
  • Born
  • hinnerup
  • Posts: 1

Post 3+ Months Ago

The method RichB suggests, would create an unknown number of undefined entries in the returned array.

The following modification should return only the relevant objects.

getRadioArray: function (groupName) {
var radioArray = new Array();
var nodeList = document.getElementsByTagName("input");
for(var i = 0; i < nodeList.length; i++) {
if(nodeList.item(i).name == groupName) {
radioArray[radioArray.length] = nodeList.item(i);
return radioArray;

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 44 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.