Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Dynamically Created Radio Button Can't Be Selected

Posted on 2003-12-05
8
Medium Priority
?
867 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

618 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