Dynamically Created Radio Button Can't Be Selected

I've written code to dynamically create new Table Rows, and then insert form elements into those table rows.  If I insert any type of form element other than radio buttons, they work fine, but I can not for the life of me get the radio buttons to work.  They appear, but they cannot be selected, and their "checked" property cannot be set to "true".

Here's a simplified version of my code thatl recreates the same problem:

<html><head></head><body>
<form name="form1">
      <table>
            <tbody id="tbody1">
                  <tr>
                        <td>
                              This is Row 1
                              <input type="button" value="Click to Add a Row" name="button1" onClick="AddRow()">
                        </td>
                  </tr>
                  <tr id="lastTR">
                        <td id="lastTD">
                              This is Row 2
                        </td>
                  </tr>
            </tbody>
      </table>
</form>
</body></html>
<script>
function AddRow() {
      
      var lastTR  = new Array()
      var lastTD  = new Array()
      var tbody1
      var newTR
      var newTD1
      var newTD2
      var input
      var td1Text
      var td2Text

      
      lastTR = document.all.lastTR
      lastTD = document.all.lastTD
      tbody1 = document.all.tbody1

      newTR = document.createElement('TR')
      newTD = document.createElement('TD')
      
      input = document.createElement('input')
      input.name = "RadioButton"
      input.type = "radio"
      input.checked = true
      
      tbody1.insertBefore(newTR, lastTR)
      newTR.appendChild(newTD)
      newTD.appendChild(input)
}
</script>

Any help would be greatly appreciated.  This is a do or die portion of my app.

Thanks!
Clay
LVL 2
claygarrettAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

claygarrettAuthor Commented:
One thing I noticed - in the code I pasted, is that the lastTD and lastTR variables should not be declared as Arrays - but the code still works.  The array declaration was left over from my original more complicated code.
0
claygarrettAuthor Commented:
Its bugging me, so I cleaned up the original code -- this code should be much more clean for you to work with...

<html><head></head><body>
<form name="form1">
     <table>
          <tbody id="tbody1">
               <tr>
                    <td>
                         This is Row 1
                         <input type="button" value="Click to Add a Row" name="button1" onClick="AddRow()">
                    </td>
               </tr>
               <tr id="lastTR">
                    <td id="lastTD">
                         This is Row 2
                    </td>
               </tr>
          </tbody>
     </table>
</form>
</body></html>
<script>
function AddRow() {
     
     var lastTR
     var lastTD
     var tbody1
     var newTR
     var newTD
     var input
     
     lastTR = document.all.lastTR
     lastTD = document.all.lastTD
     tbody1 = document.all.tbody1

     newTR = document.createElement('TR')
     newTD = document.createElement('TD')
     
     input = document.createElement('input')
     input.name = "RadioButton"
     input.type = "radio"
     input.checked = true
     
     tbody1.insertBefore(newTR, lastTR)
     newTR.appendChild(newTD)
     newTD.appendChild(input)
}
</script>
0
poliguinCommented:
need to attatch the radio button before you can set the checked attribute for checked

<html><head></head><body>
<form name="form1">
     <table>
          <tbody id="tbody1">
               <tr>
                    <td>
                         This is Row 1
                         <input type="button" value="Click to Add a Row" name="button1" onClick="AddRow()">
                    </td>
               </tr>
               <tr id="lastTR">
                    <td id="lastTD">
                         This is Row 2
                    </td>
               </tr>
          </tbody>
     </table>
</form>
</body></html>
<script>
function AddRow()
{
     
     var lastTR
     var tbody1
     var newTR
     var newTD
     var input
     
     lastTR = document.getElementById('lastTR');
     tbody1 = document.getElementById('tbody1');

     newTR = document.createElement('TR');
     newTD = document.createElement('TD');
     
     input = document.createElement('input');
     input.id = 'RadioButton';
     input.type = 'radio';
     
     tbody1.insertBefore(newTR, lastTR);
     newTD.appendChild(input);
     newTR.appendChild(newTD);
     input.checked = true;
}
</script>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jaysolomonCommented:
and document.all is an IE only

document.getElementById is NS6+ and IE5+ / DOM
0
poliguinCommented:
i noticed that but just thought i'd pass the code back with document.getElementById();
0
devicCommented:
hi claygarrett,

>>If I insert any type of form element other than radio buttons,
>>they work fine, but I can not for the life of me
>>get the radio buttons to work.

you think so that other than radio buttons works fine....
all form elements have problem with attribute name (IE).

you wrote input.name = "RadioButton"
i think poliguin saw the problem, and changed name to id ;)
but for form elements name is critical atributte.
Try to insert action and submit button, to see what you post, like in my example.


i think is the bug of IE. You can avoid this with .innerHTML;


==================================
<html><head></head><body>
<form action=http://www.google.com name="form1">
    <table>
         <tbody id="tbody1">
              <tr>
                   <td>
                        This is Row 1
                        <input type="button" value="Click to Add a Row" name="button1" onClick="AddRow()">
                   </td>
              </tr>
              <tr id="lastTR">
                   <td id="lastTD">
                        This is Row 2
                   </td>
              </tr>
         </tbody>
    </table>
      <input type=submit>
</form>
</body></html>
<script>
function AddRow()
{
      var tbody1 = document.getElementById("tbody1");
      var lastTR = document.getElementById('lastTR');
      var newTR = document.createElement('TR');
    var newTD = document.createElement('TD');
   
    tbody1.insertBefore(newTR, lastTR);
    newTR.appendChild(newTD);
    newTD.innerHTML="<input type=radio name=RadioButton>";

}
</script>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
poliguinCommented:
when creating an element dynamically like that, the name doesn't get set in IE, which is why i didn't worry about setting it.
0
claygarrettAuthor Commented:
Thanks everyone very much for the help, but devic nailed my problem head on.  Not having the name attribute available for me, was not an option, because my app will dynamically change the value of the new check box through interaction with other controls on the page.  The innerHTML property allows me to set the name.  My app is an IE only app, so it works very well.  Thanks again for all your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.