?
Solved

DHTML:  Adding Dynamic Radio Inputs

Posted on 2004-04-08
6
Medium Priority
?
3,024 Views
Last Modified: 2009-07-29
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
Comment
Question by:Dexstar
[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
  • 3
  • 2
6 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 10786653
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
 
LVL 19

Author Comment

by:Dexstar
ID: 10786799
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
 
LVL 19

Author Comment

by:Dexstar
ID: 10786817
Oops... Okay, forget #2.  I had "Value" instead of "value", and that's why it didn't work.

Dex*
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 63

Expert Comment

by:Zvonko
ID: 10787048
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
 
LVL 19

Author Comment

by:Dexstar
ID: 10787370
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
 

Expert Comment

by:abhinav76
ID: 12288831
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

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

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 …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

718 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