How to give group name for dynamically created radio buttons.

[moksha]

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').getElementsByTagName("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').getElementsByTagName("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


[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

[vee10]

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

[moksha]

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

[acoder]

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?

[moksha]

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

[acoder]

How have you used innerHTML?

[moksha]

How have you used innerHTML?

i have tried innerHTML in catch block(used for firefox) like this :

try{
                rdo = document.createElement('<input type="radio" name="fldID'+num+'"/>');
                rdo1 = document.createElement('<input type="radio" name="fldID'+num+'" />');
 
 
 
 
            }catch(err){
                rdo = document.createElement('input');
                rdo.setAttribute('type','radio');
                rdo.innerHTML="fldID'+num+'";
            <!--    rdo.setAttribute('name',"fldID'+num+'" );-->
 
 
                rdo1 = document.createElement('input');
                rdo1.setAttribute('type','radio');
                rdo1.innerHTML="fldID'+num+'";
            <!--rdo1.setAttribute('name',"fldID'+num+'" );-->
 
 
 
            }

doing this i am unable to deselect created radio buttons.

moksha

[acoder]

Use innerHTML for both on the parent element:

rdo = '<input type="radio" name="fldID'+num+'"/>';
rdo1 = '<input type="radio" name="fldID'+num+'" />';
td8.innerHTML += rdo;
// add label, etc.
td8.innerHTML += rdo1;