savidlab
asked on
How to change name of radio button on cloning
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(ta bleName);
var tableBody = tableGroup.getElementsByTa gName("tbo dy");
var trElem = tableGroup.getElementsByTa gName("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.getElementsByTa gName("inp ut");
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(t rCloneObj) ;
}
}
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:#e deff0">
<td><input type="text" name="myNamesIndex" style="width:300px;" maxlength="50" class=inputText size="50" onblur="this.value=this.va lue.toUppe rCase();">
<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;wi dth:500px; ">
<html:img border="0" onclick="addNames();" page="/images/add_btn.gif" />
</div>
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(ta
var tableBody = tableGroup.getElementsByTa
var trElem = tableGroup.getElementsByTa
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.getElementsByTa
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(t
}
}
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:#e
<td><input type="text" name="myNamesIndex" style="width:300px;" maxlength="50" class=inputText size="50" onblur="this.value=this.va
<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;wi
<html:img border="0" onclick="addNames();" page="/images/add_btn.gif"
</div>
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;
inputElem[i].name = radioName + myCtr + i;
use,
inputElem[i].name = radioName + myCtr;
ASKER
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
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
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(t his.form); ">
</form>
</body>
</html>
probably a browser issue. i'll try to find a workaround on your problem...
<!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=='
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(t
</form>
</body>
</html>
probably a browser issue. i'll try to find a workaround on your problem...
"probably a browser issue"
should be
"it is actually a browser issue"
should be
"it is actually a browser issue"
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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. :)
ASKER
sorry 'guys' and gals..
var inputElem = trCloneObj.getElementsByTa
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(ta
var tableBody = tableGroup.getElementsByTa
var trElem = tableGroup.getElementsByTa
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.getElementsByTa
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(t
}
}
</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:#e
<td><input type="text" name="myNamesIndex" style="width:300px;" maxlength="50" class=inputText size="50" onblur="this.value=this.va
<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;wi
</div>
</body>
</html>