472,340 Members | 1,790 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,340 software developers and data experts.

How to give group name for dynamically created radio buttons.

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
7 4711
vee10
141 100+
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
moksha
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
16,027 Expert Mod 8TB
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
moksha
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
16,027 Expert Mod 8TB
How have you used innerHTML?
Feb 29 '08 #6
moksha
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
16,027 Expert Mod 8TB
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

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

Similar topics

2
by: mortb | last post by:
I create a table containing radiobuttons in client script depending on what choices the user makes. It works fine the radio buttons appear *but*...
2
by: obsidian8 | last post by:
Hi All, I have looked around for an answer to this question, but haven't found one as of yet. I'm trying to use javascript to dynamically create...
1
by: Karthick Kumar | last post by:
Hi, I have the following code which displays all the images from a specific folder with a Radio button in it: Dim objFile i = 1 For Each...
3
by: Mike P | last post by:
I am working with some code where a number of contacts are taken from a table and then added to a page with a radio button to the right of each one...
5
by: Amoril | last post by:
I've read quite a few different message on various boards and for some reason I'm still having trouble wrapping my head around this viewstate...
1
by: johnjsforum | last post by:
Buddies, I have a web page to create HTML buttons dynamically as in the “formDivColorPicker” function ...
2
by: mckurban | last post by:
Hi All, I'm not very familiar with Javascript and need help with setting up some javascript code to allow users to create dynamic radio buttons...
5
by: satyabhaskar | last post by:
hi all, In my web page i have created radio buttons dynamically on to the page .....following is my code string Course,...
3
by: vidhya raman | last post by:
I have dynamically created radio buttons.how to get the value of these buttons using post. $i=1; <input type="radio" name="qtn-$i" value="yes">...
0
better678
by: better678 | last post by:
Question: Discuss your understanding of the Java platform. Is the statement "Java is interpreted" correct? Answer: Java is an object-oriented...
0
by: CD Tom | last post by:
This only shows up in access runtime. When a user select a report from my report menu when they close the report they get a menu I've called Add-ins...
0
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...
0
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was...
0
by: Matthew3360 | last post by:
Hi there. I have been struggling to find out how to use a variable as my location in my header redirect function. Here is my code. ...
2
by: Matthew3360 | last post by:
Hi, I have a python app that i want to be able to get variables from a php page on my webserver. My python app is on my computer. How would I make it...
0
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable...
0
by: Arjunsri | last post by:
I have a Redshift database that I need to use as an import data source. I have configured the DSN connection using the server, port, database, and...
0
hi
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.