By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,500 Members | 1,571 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,500 IT Pros & Developers. It's quick & easy.

How to give group name for dynamically created radio buttons.

P: 5
Hi,
I am new to javascript and i am facing a problem in coding.
plz help me out.

I am using javascript for dynamically creating a table row which contains text boxes and radio buttons and check box.
I am adding two radio buttons once for a row.Now my problem is the radio buttons in all the rows that added dynamically are behaving as same group i.e
when i am selecting a radio button in second row,radio button in first row is getting deselected.
here is my javascript code i am using.


Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. function goto_URL(object) {
  4. window.location.href = object.options[object.selectedIndex].value; }
  5. //-->
  6. </script>
  7.  
  8.   <script type="text/javascript">
  9.  
  10. var num = 1 ;
  11.  
  12. var s1234=0;
  13.  
  14.  function checkclick(source)
  15.  
  16. {
  17.  
  18. var cis = source.id;
  19.  
  20. cis = cis.substring(1,cis.length);
  21. var tbody = document.getElementById('myTable').getElementsByTagName("TBODY")[0];
  22.  
  23. var oldd = document.getElementById(cis);
  24.  
  25. if(source.checked == true)
  26.  
  27. {
  28.  
  29.     if(s1234.length >0)
  30.  
  31.        { alert(s1234); s1234 += ","+cis; 
  32.        }
  33.     else
  34.     s1234 = cis;
  35. }
  36. alert(s1234);
  37. }
  38.  
  39. function addRow1(id)
  40.  
  41. {
  42.  
  43. var tbody = document.getElementById
  44.  
  45. (id).getElementsByTagName("TBODY")[0];
  46.  
  47.  
  48. var row = document.createElement("TR")
  49.  
  50.  
  51.  
  52. var td1 = document.createElement("TD")
  53.  
  54. try{
  55. var chkbox=document.createElement('<input type="Checkbox" name="fldID" onclick="checkclick(this)" />');
  56. }
  57. catch(err){
  58. var chkbox=document.createElement('input');
  59. chkbox.setAttribute('type','Checkbox');
  60. chkbox.setAttribute('name','fldID');
  61. chkbox.onclick=new Function("checkclick(this)");
  62.  
  63.  
  64. }
  65. chkbox.id ="c"+num;
  66. td1.appendChild(chkbox);
  67. var td2 = document.createElement("TD")
  68. var newTextBox = document.createElement('input');
  69. newTextBox.type = 'text';
  70. newTextBox.size="2" ;
  71. td2.align="center";                      
  72. td2.appendChild (newTextBox)           
  73. var td3 = document.createElement("TD")
  74. var newTextBox = document.createElement('input');
  75. newTextBox.type = 'text';
  76. newTextBox.size="2" ;
  77. td3.align="center";                      
  78. td3.appendChild (newTextBox)
  79. var td4 = document.createElement("TD")
  80.  
  81. var newTextBox = document.createElement('input');
  82.  
  83. newTextBox.type = 'text';
  84.  
  85. newTextBox.size="2" ;
  86.  
  87. td4.align="center";                      
  88.  
  89. td4.appendChild (newTextBox)
  90.  
  91.  
  92.  
  93. var td5 = document.createElement("TD")
  94.  
  95. var newTextBox = document.createElement('input');
  96.  
  97. newTextBox.type = 'text';
  98.  
  99. newTextBox.size="2";
  100.  
  101. td5.align="center";                       
  102.  
  103. td5.appendChild (newTextBox)
  104.  
  105.  
  106.  
  107. var td6 = document.createElement("TD")
  108.  
  109. var newTextBox = document.createElement('input');
  110.  
  111. newTextBox.type = 'text';
  112.  
  113. newTextBox.size="7" ;
  114.  
  115. td6.align="center";                      
  116.  
  117. td6.appendChild (newTextBox)
  118.  
  119.  
  120.  
  121. var td7 = document.createElement("TD");
  122.  
  123. var newTextBox = document.createElement('input');
  124.  
  125. newTextBox.type = 'text';
  126.  
  127. newTextBox.size="4"  ;
  128.  
  129. td7.align="center";                     
  130.  
  131. td7.appendChild (newTextBox)
  132.  
  133.  
  134.  
  135. var td8 = document.createElement("TD")
  136.  
  137.  
  138.  
  139. tn = document.createTextNode('Yes');
  140. tn1 = document.createTextNode('No');
  141. try{
  142.                 rdo = document.createElement('<input type="radio" name="fldID"   />');
  143.                 rdo1 = document.createElement('<input type="radio" name="fldID" />');
  144.                 rdo.name="name"+num;
  145.                 rdo.value="rdoval"+num;
  146.                 rdo1.name="name"+num;
  147.                 rdo1.value="rdo1val"+num;
  148.                 alert(rdo.name);
  149.                 alert(rdo1.name);
  150.                 alert(rdo.value);
  151.                 alert(rdo1.value);
  152.             }catch(err){
  153.                 rdo = document.createElement('input');
  154.                 rdo.setAttribute('type','radio');
  155.                 rdo.setAttribute('name','fldID');
  156.  
  157.                 rdo1 = document.createElement('input');
  158.                 rdo1.setAttribute('type','radio');
  159.                 rdo1.setAttribute('name','fldID');
  160.  
  161.  
  162.             }
  163.             lbl = document.createElement('label');
  164.             lbl1 = document.createElement('label');
  165.  
  166.            var br = document.createElement("br");
  167.            var btn=document.createElement('input');
  168.            btn.type='submit';
  169.            btn.value='Edit';
  170.  
  171.             lbl.appendChild(tn);
  172.             td8.appendChild(rdo);
  173.             td8.appendChild(lbl);
  174.             td8.appendChild(br);
  175.             lbl1.appendChild(tn1);
  176.             td8.appendChild(rdo1);
  177.             td8.appendChild(lbl1);
  178.             td8.appendChild(btn);            
  179.  
  180.  
  181.  
  182. var td9 = document.createElement("TD")
  183.  
  184. var newTextBox = document.createElement('input');
  185.  
  186. newTextBox.type = 'textarea';
  187.  
  188. newTextBox.TextMode='MultiLine';
  189.  
  190. td9.align="center";                 
  191.  
  192. td9.appendChild (newTextBox)
  193.  
  194.  
  195.  
  196.  
  197.  
  198. var td10 = document.createElement("TD")
  199.  
  200. var newTextBox = document.createElement('input');
  201.  
  202. newTextBox.type = 'textarea';
  203.  
  204.  td10.align="center";
  205.  
  206. newTextBox.rows="5";                    
  207.  
  208. newTextBox.cols="15";
  209.  
  210. td10.appendChild (newTextBox)
  211.  
  212.  
  213.  
  214. row.appendChild(td1);
  215.  
  216. row.appendChild(td2);
  217.  
  218. row.appendChild(td3);
  219.  
  220. row.appendChild(td4);
  221.  
  222. row.appendChild(td5);
  223.  
  224. row.appendChild(td6);
  225.  
  226. row.appendChild(td7);
  227.  
  228. row.appendChild(td8);
  229.  
  230. row.appendChild(td9);
  231.  
  232. row.appendChild(td10);
  233.  
  234. row.id=num;
  235.  
  236. num = num +1;
  237.  
  238.  
  239.  
  240. tbody.appendChild(row);
  241.  
  242. }
  243.  
  244. function DeleteRows()
  245.  
  246. {
  247. alert(s1234);
  248.  
  249.  
  250.  
  251. var tbody = document.getElementById('myTable').getElementsByTagName("TBODY")[0];
  252. alert("del");
  253.  
  254. var gy = s1234.split(",");
  255.  
  256. for (i=0;i<gy.length;i++)
  257. {
  258.             var oldd = document.getElementById(gy[i]); 
  259.  
  260.             tbody.removeChild(oldd);
  261. }
  262. s1234 = 0;
  263. }
  264.  
  265. </script>
  266.  
This is html code


[HTML]<table id="myTable" border="2px" cellpadding="0px" cellspacing="0px" width="100%">
<tbody>
<tr>

<td width="6%" align="center" valign="top">Select </td>

<td width="8%" align="center" valign="top">Quantity </td>

<td width="6%" align="center" valign="top">Length </td>

<td width="5%" align="center" valign="top">Width </td>

<td width="6%" align="center" valign="top">Height </td>

<td width="12%" align="center" valign="top">Total <br/>
Measurement </td>

<td width="12%" align="center" valign="top">Total<br/>
Weight </td>

<td width="13%" align="center" > Hazardous</td>

<td width="20%" align="center" valign="top"><p>Package and Description</br>
of Cargo </p>
</td>

<td width="12%" align="center" valign="top">Comments </td>
</tr>


<tr>
<td width="6%" align="center"> <input name="" type="checkbox" value="" /></td>

<td width="8%" ><input name="" type="text" size="2" /> </td>

<td width="6%" align="left" ><input name="" type="text" size="2" /> </td>

<td width="5%" align="center"><input name="" type="text" size="2" /> </td>

<td width="6%" align="center"><input name="" type="text" size="2" /> </td>

<td width="12%" align="center"><input name="" type="text" size="7" /> </td>

<td width="12%" align="center"><input name="" type="text" size="4" /> </td>
<td width="13%">
<input value="Y" type="radio" id="yes" name="">Yes<br>
<input value="Y" type="radio" id="yes" name="">No
<label>
<input type="submit" value="Edit" />
</label>
</td>
<td width="18%" align="center"><textarea cols="10"></textarea> </td>

<td width="14%" align="center"> <textarea cols="10"></textarea>
</td>

</tr>


</tbody>
</table>
</td>
</tr>
</span>
<tr>
<td colspan="4" align="right"><br/>

<input type="button" value="Add Row" onclick="addRow1('myTable')"/>
<input type="button" value="Delete Selected Rows" onclick="DeleteRows()" />
<input type="button" value="Submit" /> </td>
</tr>


</table>[/HTML]


regards,
moksha
Feb 28 '08 #1
Share this Question
Share on Google+
7 Replies


100+
P: 141
Hi,

This may solve ur problem

rdo = document.createElement('<input type="radio" name="fldID'+num+'"/>');
rdo1 = document.createElement('<input type="radio" name="fldID'+num+'" />');

for giving differnet group name u can set in the above way and if u give
rdo.name = "name"+num
it will not set the name attribute .



Hi,
I am new to javascript and i am facing a problem in coding.
plz help me out.

I am using javascript for dynamically creating a table row which contains text boxes and radio buttons and check box.
I am adding two radio buttons once for a row.Now my problem is the radio buttons in all the rows that added dynamically are behaving as same group i.e
when i am selecting a radio button in second row,radio button in first row is getting deselected.
here is my javascript code i am using.


<script type="text/javascript">
<!--
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value; }
//-->
</script>

<script type="text/javascript">

var num = 1 ;

var s1234=0;

function checkclick(source)

{

var cis = source.id;

cis = cis.substring(1,cis.length);
var tbody = document.getElementById('myTable').getElementsByTa gName("TBODY")[0];

var oldd = document.getElementById(cis);

if(source.checked == true)

{

if(s1234.length >0)

{ alert(s1234); s1234 += ","+cis;
}
else
s1234 = cis;
}
alert(s1234);
}

function addRow1(id)

{

var tbody = document.getElementById

(id).getElementsByTagName("TBODY")[0];


var row = document.createElement("TR")



var td1 = document.createElement("TD")

try{
var chkbox=document.createElement('<input type="Checkbox" name="fldID" onclick="checkclick(this)" />');
}
catch(err){
var chkbox=document.createElement('input');
chkbox.setAttribute('type','Checkbox');
chkbox.setAttribute('name','fldID');
chkbox.onclick=new Function("checkclick(this)");


}
chkbox.id ="c"+num;
td1.appendChild(chkbox);
var td2 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.size="2" ;
td2.align="center";
td2.appendChild (newTextBox)
var td3 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.size="2" ;
td3.align="center";
td3.appendChild (newTextBox)
var td4 = document.createElement("TD")

var newTextBox = document.createElement('input');

newTextBox.type = 'text';

newTextBox.size="2" ;

td4.align="center";

td4.appendChild (newTextBox)



var td5 = document.createElement("TD")

var newTextBox = document.createElement('input');

newTextBox.type = 'text';

newTextBox.size="2";

td5.align="center";

td5.appendChild (newTextBox)



var td6 = document.createElement("TD")

var newTextBox = document.createElement('input');

newTextBox.type = 'text';

newTextBox.size="7" ;

td6.align="center";

td6.appendChild (newTextBox)



var td7 = document.createElement("TD");

var newTextBox = document.createElement('input');

newTextBox.type = 'text';

newTextBox.size="4" ;

td7.align="center";

td7.appendChild (newTextBox)



var td8 = document.createElement("TD")



tn = document.createTextNode('Yes');
tn1 = document.createTextNode('No');
try{
rdo = document.createElement('<input type="radio" name="fldID" />');
rdo1 = document.createElement('<input type="radio" name="fldID" />');
rdo.name="name"+num;
rdo.value="rdoval"+num;
rdo1.name="name"+num;
rdo1.value="rdo1val"+num;
alert(rdo.name);
alert(rdo1.name);
alert(rdo.value);
alert(rdo1.value);
}catch(err){
rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','fldID');

rdo1 = document.createElement('input');
rdo1.setAttribute('type','radio');
rdo1.setAttribute('name','fldID');


}
lbl = document.createElement('label');
lbl1 = document.createElement('label');

var br = document.createElement("br");
var btn=document.createElement('input');
btn.type='submit';
btn.value='Edit';

lbl.appendChild(tn);
td8.appendChild(rdo);
td8.appendChild(lbl);
td8.appendChild(br);
lbl1.appendChild(tn1);
td8.appendChild(rdo1);
td8.appendChild(lbl1);
td8.appendChild(btn);



var td9 = document.createElement("TD")

var newTextBox = document.createElement('input');

newTextBox.type = 'textarea';

newTextBox.TextMode='MultiLine';

td9.align="center";

td9.appendChild (newTextBox)





var td10 = document.createElement("TD")

var newTextBox = document.createElement('input');

newTextBox.type = 'textarea';

td10.align="center";

newTextBox.rows="5";

newTextBox.cols="15";

td10.appendChild (newTextBox)



row.appendChild(td1);

row.appendChild(td2);

row.appendChild(td3);

row.appendChild(td4);

row.appendChild(td5);

row.appendChild(td6);

row.appendChild(td7);

row.appendChild(td8);

row.appendChild(td9);

row.appendChild(td10);

row.id=num;

num = num +1;



tbody.appendChild(row);

}

function DeleteRows()

{
alert(s1234);



var tbody = document.getElementById('myTable').getElementsByTa gName("TBODY")[0];
alert("del");

var gy = s1234.split(",");

for (i=0;i<gy.length;i++)
{
var oldd = document.getElementById(gy[i]);

tbody.removeChild(oldd);
}
s1234 = 0;
}

</script>

This is html code


<table id="myTable" border="2px" cellpadding="0px" cellspacing="0px" width="100%">
<tbody>
<tr>

<td width="6%" align="center" valign="top">Select </td>

<td width="8%" align="center" valign="top">Quantity </td>

<td width="6%" align="center" valign="top">Length </td>

<td width="5%" align="center" valign="top">Width </td>

<td width="6%" align="center" valign="top">Height </td>

<td width="12%" align="center" valign="top">Total <br/>
Measurement </td>

<td width="12%" align="center" valign="top">Total<br/>
Weight </td>

<td width="13%" align="center" > Hazardous</td>

<td width="20%" align="center" valign="top"><p>Package and Description</br>
of Cargo </p>
</td>

<td width="12%" align="center" valign="top">Comments </td>
</tr>


<tr>
<td width="6%" align="center"> <input name="" type="checkbox" value="" /></td>

<td width="8%" ><input name="" type="text" size="2" /> </td>

<td width="6%" align="left" ><input name="" type="text" size="2" /> </td>

<td width="5%" align="center"><input name="" type="text" size="2" /> </td>

<td width="6%" align="center"><input name="" type="text" size="2" /> </td>

<td width="12%" align="center"><input name="" type="text" size="7" /> </td>

<td width="12%" align="center"><input name="" type="text" size="4" /> </td>
<td width="13%">
<input value="Y" type="radio" id="yes" name="">Yes<br>
<input value="Y" type="radio" id="yes" name="">No
<label>
<input type="submit" value="Edit" />
</label>
</td>
<td width="18%" align="center"><textarea cols="10"></textarea> </td>

<td width="14%" align="center"> <textarea cols="10"></textarea>
</td>

</tr>


</tbody>
</table>
</td>
</tr>
</span>
<tr>
<td colspan="4" align="right"><br/>

<input type="button" value="Add Row" onclick="addRow1('myTable')"/>
<input type="button" value="Delete Selected Rows" onclick="DeleteRows()" />
<input type="button" value="Submit" /> </td>
</tr>


</table>


regards,
moksha
Feb 28 '08 #2

P: 5
Hi,

This may solve ur problem

rdo = document.createElement('<input type="radio" name="fldID'+num+'"/>');
rdo1 = document.createElement('<input type="radio" name="fldID'+num+'" />');

for giving differnet group name u can set in the above way and if u give
rdo.name = "name"+num
it will not set the name attribute .

Thank u

The code that you have given for try block

rdo = document.createElement('<input type="radio" name="fldID'+num+'"/>');

is working fine with internet explorer.
And i changed the code in catch block to make code work with Firefox too as follows

rdo1.setAttribute('name',"fldID'+num+'");

and its not working with Mozilla Firefox .

moksha
Feb 28 '08 #3

acoder
Expert Mod 15k+
P: 16,027
The try/catch wouldn't work in Opera. Use innerHTML instead. Ideally, you'd use DOM methods, but with IE's bug, what can you do?
Feb 28 '08 #4

P: 5
The try/catch wouldn't work in Opera. Use innerHTML instead. Ideally, you'd use DOM methods, but with IE's bug, what can you do?

thanks 4 response.
But i didn't get u and i have tried with innerHTML too its not working.
Only with try n catch iam able to make code work in both ie and firefox.
(i want my code to work with firefox).
any suggestions plz
Feb 29 '08 #5

acoder
Expert Mod 15k+
P: 16,027
How have you used innerHTML?
Feb 29 '08 #6

P: 5
How have you used innerHTML?
i have tried innerHTML in catch block(used for firefox) like this :

Expand|Select|Wrap|Line Numbers
  1. try{
  2.                 rdo = document.createElement('<input type="radio" name="fldID'+num+'"/>');
  3.                 rdo1 = document.createElement('<input type="radio" name="fldID'+num+'" />');
  4.  
  5.  
  6.  
  7.  
  8.             }catch(err){
  9.                 rdo = document.createElement('input');
  10.                 rdo.setAttribute('type','radio');
  11.                 rdo.innerHTML="fldID'+num+'";
  12.             <!--    rdo.setAttribute('name',"fldID'+num+'" );-->
  13.  
  14.  
  15.                 rdo1 = document.createElement('input');
  16.                 rdo1.setAttribute('type','radio');
  17.                 rdo1.innerHTML="fldID'+num+'";
  18.             <!--rdo1.setAttribute('name',"fldID'+num+'" );-->
  19.  
  20.  
  21.  
  22.             }

doing this i am unable to deselect created radio buttons.

moksha
Mar 3 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Use innerHTML for both on the parent element:
Expand|Select|Wrap|Line Numbers
  1. rdo = '<input type="radio" name="fldID'+num+'"/>';
  2. rdo1 = '<input type="radio" name="fldID'+num+'" />';
  3. td8.innerHTML += rdo;
  4. // add label, etc.
  5. td8.innerHTML += rdo1;
Mar 3 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.