• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3026
  • Last Modified:

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>
0
Dexstar
Asked:
Dexstar
  • 3
  • 2
1 Solution
 
ZvonkoSystems 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
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now