   [web] Hiding matching radio buttons
  I'm in the process of writing a simple league records site for my friend. The problem is a (probably) simple one.On the "New Results" screen, the names of all the players in the league are shown next to radio buttons. I wanted a script that hid the name in one column when its equivalent is selected in the other column. Excuse the ASCII art...The pair of name lists as they stand...+----------+ +----------+| o Name 1 | | o Name 1 || o Name 2 | | o Name 2 |+----------+ +----------+When "Name 2" is chosen...+----------+ +----------+| o Name 1 | | o Name 1 || x Name 2 | |   Name 2 |+----------+ +----------+Each radio button looks similar to the following;<fieldset id="left"><input type="radio" name = "left" id="Name 1" value="Name 1" onclick="&#106avascript:onClick(this)"/>Name 1<br/>...</ fieldset>The code I have to hide the correct button is;function onClick(radio){var opposing_list;// find out which radio button was clickedif(radio.parentNode.id == "left")opposing_list = document.getElementById["right"].childNodes;elseopposing_list = document.getElementById["left"].childNodes;// unhide all values in the other listvar node;for (node in opposing_list){if(node.id == radio.id){node.style.display = "none";node.style.visibility = "collapse";}else{node.style.display = "block";node.style.visibility = "visible";}}}Could someone suggest what I'm doing wrong? I'm sure it's something simple that I've overlooked, but I can't for the life of me think what it could be.Any help would be much appreciated.[Edited by - webwraith on May 13, 2010 5:30:13 PM]
  If this isn't a form (and it sounds like it's not), you shouldn't be using interactive radio buttons.If it IS a form, then maybe this isn't the best way to layout the interface. I say this because if only one of the two radio buttons is even visible, what's the point of having a radio button? If the second radio button becomes invisible after clicking one of the two, then that means you can't change your mind after an accident. Perhaps you could change a background color something else to indicate it's having been clicked instead. I would need to know more about what you're trying to accomplish first though.You may also want to utilize the disabled="disabled" attribute on the radio buttons.   ;  As for the code, it looks like (just scanning, not actually trying it) this line won't ever evaluate TRUE:if(node.id == radio.id){Because NODE is in the opposing list and RADIO is the one that got clicked. Technically, your IDs should be unique identifiers.You may also suspect this line:for (node in opposing_list){which behaves uncooperatively in some browsers. Try using a regular incrementing forloop.   ;  node.id == radio.idThis won't work. id's must be unique in a document. You could work with the class attribute (accessible via element.className). Also, keep in mind that the id attribute must contain an NMTOKEN value, which means it can't contain spaces (in contrast to class, which can, and thus you can apply multiple classes to one element).   ;  OK, for some reason it didn't click that ids should be unique at the document level. I assumed (I know, bad me) that they only needed to be unique at the parent tag level.As for whether or not this is a form, yes, the two lists are each in a field set, both of which are contained in a form (that is using a table for layout).When the player chooses a name in the FIRST list the SAME NAME in the SECOND list is disabled, and vice versa. The names that are disabled are not in the same list. It's so we can choose a player and their opponent, without accidentally choosing the same player as their own opponent.I wasn't even aware of the "disabled" property, as I'm teaching myself as I'm going along, and I just looked up "radio buttons" on w3schools. It lists the properties, but I wasn't looking for this one, so I never saw it :PTaking into account what you've both said, I have amended the &#106avascript to:function onClick(radio){var opposing_list;// find out which radio button was clickedif(radio.parentNode.id == "left")opposing_list = document.getElementById["right"].childNodes;elseopposing_list = document.getElementById["left"].childNodes;// unhide all values in the other listvar node;for (node = [0] ;node < opposing_list.length;node++){ // <- for some reason the forum keeps adding square brackets to the zero here.// the values are identical in each list, and match the players nameif(opposing_list[node].value == radio.value){opposing_list[node].disabled = true;}else{opposing_list[node].disabled = false;}}}and the input tags (with surrounding table and form tags):<form action="new_record.php" method="post"><table><tr><td><fieldset><table><tr><td><fieldset id="left"><input type="radio" name = "left" onclick="javascript:onClick(this)" value="webwraith"/>webwraith<br/>...Unfortunately, the above still doesn't work.Am I on the right track, or am I going about things the wrong way?EDIT: I thought it could be the fact that I'd made a copy of the arrays that store the lists of child nodes, but changing this didn't help either, although I do have a new function to show for it:function onClick(radio){// radio is the radio button that has been selected// so disable its partner in the other list// and reenable all othersvar list_length = document.getElementById['left'].childElements.length;var other;if(this.parentNode.id == "left")other = "right";elseother = "left";var name = radio.id;var nm_len = name.length;var index = [0];for(; index < list_length; index++){if(index == parseInt(name.substr(nm_len-[1])))document.getElementById[other+index].disabled = true;elsedocument.getElementById[other+index].disabled = false;}}And the radio buttons have ids again, although they are unique this time round...<input type="radio" id="left0" name = "left" onclick="javascript:onClick(this)" value="webwraith"/>webwraith<br/> [Edited by - webwraith on May 14, 2010 6:55:08 AM];  Design-wise, here's what i'm thinking:Radio buttons, by their very nature, create a mutually-exclusive set. Only one option can be chosen at a time. Therefore, i'm thinking it would be best to share the "name" between a set of radio buttons for the player and the player's opponent:RADIO1: name: player_1, value: aRADIO2: name: player_1, value: bThis way, you can choose one or the other, but not both.It's a clever trick to prefix all the radio button names with something in common (like "player_"). That way, on the server side you can simply filter the POST array for anything called "player_*" and go from there. The "value" can be a database ID. ;  That would be a possibility, but brings up the problem of allowing multiple names from the same list. Currently each of the two lists are grouped, allowing only one name from each list to be chosen. If I did that, I'd then have to find a way to mimic the radio buttons effect for the rest of the list   