Solved

DHTML:  Adding Dynamic Radio Inputs

Posted on 2004-04-08
6
3,016 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
  • 3
  • 2
6 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Oops... Okay, forget #2.  I had "Value" instead of "value", and that's why it didn't work.

Dex*
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
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
Comment Utility
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
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now