?
Solved

Dynamically Created Radio Button Can't Be Selected

Posted on 2003-12-05
8
Medium Priority
?
862 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
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 1000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

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