Solved

Dynamically Created Radio Button Can't Be Selected

Posted on 2003-12-05
8
853 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
 
LVL 16

Expert Comment

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

document.getElementById is NS6+ and IE5+ / DOM
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now