Solved

How to change name of radio button on cloning

Posted on 2006-06-09
8
226 Views
Last Modified: 2010-05-19
Hi to All,

I would just like to ask, why is it that I am not able to change the name of RADIO button when I'm cloning its element? I was successful in cloning the textbox as well as other elements but I'm having problems with radio buttons. Do you have any suggetions on this? I have copied part of the javascript and the table in jsp for your perusal. I badly need some answers please help. thanks

var myCtr = 1;
var idName = 1;
function addNames() {

      if (myCtr < MAX_APPLICATIONS){

            var tableName = "MyTable";
            var trIdPostFix = "trName";
            var radioName = "myRB";
      
            var tableGroup = document.getElementById(tableName);
            var tableBody = tableGroup.getElementsByTagName("tbody");
            var trElem = tableGroup.getElementsByTagName("tr");
            var trSrcObj;
            var trCloneObj;
            idName++;
            myCtr++;      
            
            //get id of tr
            if (trElem.length > 0) {
                  //1 -- Gender Name - TH
                  //2 -- Gender / Sex
                  trSrcObj = trElem[1];
            }

            //cloneNode      
            trCloneObj = trSrcObj.cloneNode(true);
            trCloneObj.id = idName + trIdPostFix;

            var inputElem = trCloneObj.getElementsByTagName("input");
            for (var i=0; i<inputElem.length; i++) {
                  if ((inputElem[i].type) == "text") {
                        inputElem[i].value = "namecount -- " + i;
                  }
                  if ((inputElem[i].type) == "radio") {
                        inputElem[i].name = radioName + i;
                  }
            }
      

            alert("Name Count is -- " + myCtr);
            //append tr to tbody
            tableBody[0].appendChild(trCloneObj);            
      }
}



THIS IS THE PART OF THE JSP PAGE:

<table border="1" cellspacing="0" cellpadding="0" width="80%" id="myTable">
   <tbody>
      <tr>
      <th colspan="4">Gender</th>
      </tr>
                              
      <tr id="1trName" style="background-color:#edeff0">
      <td><input type="text" name="myNamesIndex" style="width:300px;" maxlength="50" class=inputText size="50" onblur="this.value=this.value.toUpperCase();">
      <td valign="middle" width="8%" align="center">
            <input type="radio" name="myRB1" value="Male">
      </td>
      <td valign="middle" width="8%" align="center">
            <input type="radio" name="myRB1" value="Female">
      </td>
      </tr>
   </tbody>
</table>

<div style="text-align:right;width:500px;">
<html:img border="0" onclick="addNames();" page="/images/add_btn.gif"/>
</div>
0
Comment
Question by:savidlab
  • 5
  • 3
8 Comments
 
LVL 30

Expert Comment

by:third
ID: 16868225
the name of the radio button doesn't change 'coz you are not actually changing it. i added the 'myCtr' variable to name of the radio button below.

 var inputElem = trCloneObj.getElementsByTagName("input");
          for (var i=0; i<inputElem.length; i++) {
               if ((inputElem[i].type) == "text") {
                    inputElem[i].value = "namecount -- " + i;
               }
               if ((inputElem[i].type) == "radio") {
                    inputElem[i].name = radioName + myCtr + i;
               }
          }

-----------------------

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var myCtr = 1;
var idName = 1;
var MAX_APPLICATIONS = 10;
function addNames() {

     if (myCtr < MAX_APPLICATIONS){

          var tableName = "MyTable";
          var trIdPostFix = "trName";
          var radioName = "myRB";
     
          var tableGroup = document.getElementById(tableName);
          var tableBody = tableGroup.getElementsByTagName("tbody");
          var trElem = tableGroup.getElementsByTagName("tr");
          var trSrcObj;
          var trCloneObj;
          idName++;
          myCtr++;    
         
          //get id of tr
          if (trElem.length > 0) {
               //1 -- Gender Name - TH
               //2 -- Gender / Sex
               trSrcObj = trElem[1];
          }

          //cloneNode    
          trCloneObj = trSrcObj.cloneNode(true);
          trCloneObj.id = idName + trIdPostFix;

          var inputElem = trCloneObj.getElementsByTagName("input");
          for (var i=0; i<inputElem.length; i++) {
               if ((inputElem[i].type) == "text") {
                    inputElem[i].value = "namecount -- " + i;
               }
               if ((inputElem[i].type) == "radio") {
                    inputElem[i].name = radioName + myCtr + i;
                    alert(inputElem[i].name);
               }
          }
     

          alert("Name Count is -- " + myCtr);
          //append tr to tbody
          tableBody[0].appendChild(trCloneObj);          
     }
}
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<table border="1" cellspacing="0" cellpadding="0" width="80%" id="myTable">
   <tbody>
      <tr>
     <th colspan="4">Gender</th>
      </tr>
                         
      <tr id="1trName" style="background-color:#edeff0">
     <td><input type="text" name="myNamesIndex" style="width:300px;" maxlength="50" class=inputText size="50" onblur="this.value=this.value.toUpperCase();">
     <td valign="middle" width="8%" align="center">
          <input type="radio" name="myRB1" value="Male">
     </td>
     <td valign="middle" width="8%" align="center">
          <input type="radio" name="myRB1" value="Female">
     </td>
      </tr>
   </tbody>
</table>

<div style="text-align:right;width:500px;"><input type="button" value="Add Name" onclick="addNames();" >
</div>
</body>
</html>
0
 
LVL 30

Expert Comment

by:third
ID: 16868270
hmm, to enable grouping of radio button per row, we should take out the 'i' so instead of

inputElem[i].name = radioName + myCtr + i;

use,

inputElem[i].name = radioName + myCtr;
0
 

Author Comment

by:savidlab
ID: 16872619
yeah your right, I've used

inputElem[i].name = radioName + myCtr;

to append the number to the name of the radio button BUT

when I view the radio buttons on the jsp page, it is correctly saying that the name of the radio button is diffrent from the other using an onclick event on each radio button: onclick="alert(this.name)";

You're right it does change the name but STILL when I click the radio button it doesn't select the gender per row but used the same name for all radio buttons

SO,

i decided to find out by using ---> alert(trCloneObj.innerHTML);

and it shows that it really did not change the name of the radio button

i have found out from a site that radio buttons can't be clone

but do you know a way that i could really change the name of the radio button in any other way ?

Please it would answer everything I need if one would give me an answer.


Thanks
0
 
LVL 30

Expert Comment

by:third
ID: 16875406
my experiment shows that changing the name of the radio button works in FF but not IE. i have this simple code.

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Author: Third Santor</title>
<script>
  function changeRadioName(obj){
    for(var i=0; i<obj.length; i++){
        if(obj.elements[i].type=='radio'){
          if(i>1){
            obj.elements[i].name = 'rad2';
            }
            alert(obj.elements[i].name);
        }       
      }
  }
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<form name="form1" method="post" action="" onsubmit="">
<input type="radio" name="rad1">
<input type="radio" name="rad1">
<input type="radio" name="rad1">
<input type="radio" name="rad1">
<input type="button" value="Click" onclick="changeRadioName(this.form);">
</form>
</body>
</html>

probably a browser issue. i'll try to find a workaround on your problem...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 30

Expert Comment

by:third
ID: 16875410
"probably a browser issue"

should be

"it is actually a browser issue"
0
 
LVL 30

Accepted Solution

by:
third earned 500 total points
ID: 16875494
hi savidlab,

i managed to find a workaround but i can't still make it work on FF. but it works great in IE. in the meantime, i'll post my updated code.

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var myCtr = 1;
var idName = 1;
var MAX_APPLICATIONS = 10;
function addNames() {

     if (myCtr < MAX_APPLICATIONS){

          var tableName = "MyTable";
          var trIdPostFix = "trName";
          var radioName = "myRB";
     
          var tableGroup = document.getElementById(tableName);
          var tableBody = tableGroup.getElementsByTagName("tbody");
          var trElem = tableGroup.getElementsByTagName("tr");
          var trSrcObj;
          var trCloneObj;
          idName++;
          myCtr++;    
         
          //get id of tr
          if (trElem.length > 0) {
               //1 -- Gender Name - TH
               //2 -- Gender / Sex
               trSrcObj = trElem[1];
          }

          //cloneNode    
          trCloneObj = trSrcObj.cloneNode(true);
          trCloneObj.id = idName + trIdPostFix;

          var inputElem = trCloneObj.getElementsByTagName("input");
          for (var i=0; i<inputElem.length; i++) {
               if (inputElem[i].type == "radio") {
                       var tdNode = inputElem[i].parentNode;
                         tdNode.innerHTML = tdNode.innerHTML.split("myRB1").join("myRB" + myCtr);
                 alert(inputElem[i].name);
               }
          }
     

          alert("Name Count is -- " + myCtr);
          //append tr to tbody
          tableBody[0].appendChild(trCloneObj);          
     }
}
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<table border="1" cellspacing="0" cellpadding="0" width="80%" id="myTable">
   <tbody>
      <tr>
     <th colspan="4">Gender</th>
      </tr>
                         
      <tr id="1trName" style="background-color:#edeff0">
     <td><input type="text" name="myNamesIndex" style="width:300px;" maxlength="50" class=inputText size="50" onblur="this.value=this.value.toUpperCase();"></td>
     <td valign="middle" width="8%" align="center">
          <input type="radio" name="myRB1" value="Male">
     </td>
     <td valign="middle" width="8%" align="center">
          <input type="radio" name="myRB1" value="Female">
     </td>
      </tr>
   </tbody>
</table>

<div style="text-align:right;width:500px;"><input type="button" value="Add Name" onclick="addNames();" >
</div>
</body>
</html>
0
 

Author Comment

by:savidlab
ID: 16957142
wow this is great. It works fine. Just one more thing though, how can I still catch the value of the names after I submitted and I click the back button of the browser. I've noticed that whenever I submitted the form and click the back button the only thing that is being shown is the first name and not the rest of the names that I added. I know this is too much to ask but it is a great challenge to you gaus and gals. :)
0
 

Author Comment

by:savidlab
ID: 16957146
sorry 'guys' and gals..
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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 …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

895 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

15 Experts available now in Live!

Get 1:1 Help Now