Solved

Dynamically Created Radio Button Can't Be Selected

Posted on 2003-12-05
8
855 Views
Last Modified: 2008-03-10
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
0
Comment
Question by:claygarrett
8 Comments
 
LVL 2

Author Comment

by:claygarrett
ID: 9884378
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
 
LVL 2

Author Comment

by:claygarrett
ID: 9884395
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
 
LVL 2

Expert Comment

by:poliguin
ID: 9885207
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 16

Expert Comment

by:jaysolomon
ID: 9885241
and document.all is an IE only

document.getElementById is NS6+ and IE5+ / DOM
0
 
LVL 2

Expert Comment

by:poliguin
ID: 9885355
i noticed that but just thought i'd pass the code back with document.getElementById();
0
 
LVL 25

Accepted Solution

by:
devic earned 250 total points
ID: 9886306
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
 
LVL 2

Expert Comment

by:poliguin
ID: 9897789
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
 
LVL 2

Author Comment

by:claygarrett
ID: 9898107
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question