DHTML: Adding Dynamic Radio Inputs

I'm trying to dynamically add radio inputs to a form, but it's not working quite right.  The code I have adds the radio buttons properly, but they are not selectable, and I can't seem to be able to retrieve the value.  How do I fix it so they are selectable, and I can retrieve the value of the one the user selects?

It only needs to work on IE5 or higher.  Thanks in advance.

Dex*

---
Here is the code thus far
---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
      <HEAD>
            <TITLE>Radio Test</TITLE>
            <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
            <SCRIPT>
                  var nCount = 0;
                  
                  function AddRadio()
                  {
                        var aE2 = document.createElement("<input type=\"radio\">");
                        //aE2.Type = "radio";
                        aE2.Name = "SelOpt";
                        aE2.Value = ++nCount;
            
                        var oRow = tblTest.insertRow(-1);
                        var oCell = oRow.insertCell(-1);
                        oCell.appendChild( aE2 );
            
                        oCell = oRow.insertCell(-1);
                        oCell.innerHTML = "Option #" + nCount;
                  }

                  function RadioTest()
                  {
                        var str = "Options Created = " + nCount + "\n" +
                                          "Selected = " + frmTest.SelOpt.value;
                        divResult.innerHTML = str;
                  }

                  </SCRIPT>
      </HEAD>
      <BODY>
            <BLOCKQUOTE>
                  <h1>Radio Test</h1>
                  <input type=button onclick="AddRadio();" value="Add Radio Option">
                  <br>
                  <input type=button onclick="RadioTest();" value="Show Option" ID="Button1" NAME="Button1">
                  <p>
                  <div id="divResult"></div>
                  </p>
                  <form id="frmTest">
                        <table id="tblTest">
                        </table>
                  </form>
            </BLOCKQUOTE>
      </BODY>
</HTML>
LVL 19
DexstarAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
ZvonkoConnect With a Mentor Systems architectCommented:
Check this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
     <HEAD>
          <TITLE>Radio Test</TITLE>
          <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
          <SCRIPT>
               var nCount = 0;
               
               function AddRadio()
               {
                    var aE2 = document.createElement("<input type=\"radio\" name=\"SelOpt\" >");

                    //aE2.type = "radio";
                    //aE2.name = "SelOpt";
                    aE2.id = "SelOpt";
                    aE2.value = ++nCount;
         
                    var oRow = tblTest.insertRow(-1);
                    var oCell = oRow.insertCell(-1);
                    oCell.appendChild( aE2 );
         
                    oCell = oRow.insertCell(-1);
                    oCell.innerHTML = "Option #" + nCount;
               }

               function RadioTest()
               {
                    selOptVal = "undefined";
                    selGroup = frmTest.SelOpt;
                    if(selGroup.length){
                      for(i=0;i<selGroup.length;i++){
                        if(selGroup[i].checked==true){
                          selOptVal = selGroup[i].value;
                        }
                      }
                    } else {
                      if(selGroup.checked==true){
                        selOptVal = selGroup.value;
                      }
                    }
                    var str = "Options Created = " + nCount + "\n" +
                                   "Selected = " + selOptVal;
                    divResult.innerHTML = str;
               }

               </SCRIPT>
     </HEAD>
     <BODY>
          <BLOCKQUOTE>
               <h1>Radio Test</h1>
               <input type=button onclick="AddRadio();" value="Add Radio Option">
               <br>
               <input type=button onclick="RadioTest();" value="Show Option" ID="Button1" NAME="Button1">
               <p>
               <div id="divResult"></div>
               </p>
               <form id="frmTest">
                    <table id="tblTest">
                    </table>
               </form>
          </BLOCKQUOTE>
     </BODY>
</HTML>



0
 
DexstarAuthor Commented:
Thanks, Zvonko!  That is an improvement.

Couple of issues remain:
1) Why do I have to specify the name in the createElement command?  Why doesn't it work to set it after the fact?  (The same is true for the type="radio" part.  I should be able to say aE2.type = "radio" but that doesn't work either.

2) It doesn't report what the value of the selected control was.  It just says whether or not one was selected.  I am going to need the value.  For now, it just fills the div with something like:
     Options Created = 3 Selected = on

Thanks.

Dex*
0
 
DexstarAuthor Commented:
Oops... Okay, forget #2.  I had "Value" instead of "value", and that's why it didn't work.

Dex*
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
ZvonkoSystems architectCommented:
This works (except for the name attribute):

               function AddRadio()
               {
                    var aE2 = document.createElement("input");

                    aE2.type = "radio";
                    aE2.name = "SelOpt";
                    aE2.id = "SelOpt";
                    aE2.value = ++nCount;
         
                    var oRow = tblTest.insertRow(-1);
                    var oCell = oRow.insertCell(-1);
                    oCell.appendChild( aE2 );
         
                    oCell = oRow.insertCell(-1);
                    oCell.innerHTML = "Option #" + nCount;
               }

And without name does radio button not work.
The name attribute is the radio group selector.




0
 
DexstarAuthor Commented:
I understand why the radio buttons didn't work before, but I still want to know why you have to set the name operator in the createElement.  The funny thing is, if you do it in C++ code, it DOES work, which is weird.  Anyway, thanks for your help.

-Dex*
0
 
abhinav76Commented:
The name attribute does not work because the name property is not defined for a node. You can do this using the setAttribute method of the node. Thus, instead of using aE2.name = "SelOpt", you should use aE2.setAttribute("name", "SelOpt") and it will work just fine.

Of course, you can also set other properties in the same way, for example, aE2.setAttribute("type", "radio")

Warm regards,
Abhinav Maheshwari

http://abhinavmaheshwari.blogspot.com

0
All Courses

From novice to tech pro — start learning today.