How to give group name for dynamically created radio buttons.

**vee10** · Feb 28 '08, 05:49 AM

Hi,

This may solve ur problem

rdo = document.create Element('<input type="radio" name="fldID'+nu m+'"/>');
rdo1 = document.create Element('<input type="radio" name="fldID'+nu m+'" />');

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 .

Originally posted by 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">

</script>

<script type="text/javascript">

var num = 1 ;

var s1234=0;

function checkclick(sour ce)

{

var cis = source.id;

cis = cis.substring(1 ,cis.length);
var tbody = document.getEle mentById('myTab le').getElement sByTagName("TBO DY")[0];

var oldd = document.getEle mentById(cis);

if(source.check ed == true)

{

if(s1234.length >0)

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

function addRow1(id)

{

var tbody = document.getEle mentById

(id).getElement sByTagName("TBO DY")[0];

var row = document.create Element("TR")

var td1 = document.create Element("TD")

try{
var chkbox=document .createElement( '<input type="Checkbox" name="fldID" onclick="checkc lick(this)" />');
}
catch(err){
var chkbox=document .createElement( 'input');
chkbox.setAttri bute('type','Ch eckbox');
chkbox.setAttri bute('name','fl dID');
chkbox.onclick= new Function("check click(this)");

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

var newTextBox = document.create Element('input' );

newTextBox.type = 'text';

newTextBox.size ="2" ;

td4.align="cent er";

td4.appendChild (newTextBox)

var td5 = document.create Element("TD")

var newTextBox = document.create Element('input' );

newTextBox.type = 'text';

newTextBox.size ="2";

td5.align="cent er";

td5.appendChild (newTextBox)

var td6 = document.create Element("TD")

var newTextBox = document.create Element('input' );

newTextBox.type = 'text';

newTextBox.size ="7" ;

td6.align="cent er";

td6.appendChild (newTextBox)

var td7 = document.create Element("TD");

var newTextBox = document.create Element('input' );

newTextBox.type = 'text';

newTextBox.size ="4" ;

td7.align="cent er";

td7.appendChild (newTextBox)

var td8 = document.create Element("TD")

tn = document.create TextNode('Yes') ;
tn1 = document.create TextNode('No');
try{
rdo = document.create Element('<input type="radio" name="fldID" />');
rdo1 = document.create Element('<input type="radio" name="fldID" />');
rdo.name="name" +num;
rdo.value="rdov al"+num;
rdo1.name="name "+num;
rdo1.value="rdo 1val"+num;
alert(rdo.name) ;
alert(rdo1.name );
alert(rdo.value );
alert(rdo1.valu e);
}catch(err){
rdo = document.create Element('input' );
rdo.setAttribut e('type','radio ');
rdo.setAttribut e('name','fldID ');

rdo1 = document.create Element('input' );
rdo1.setAttribu te('type','radi o');
rdo1.setAttribu te('name','fldI D');

}
lbl = document.create Element('label' );
lbl1 = document.create Element('label' );

var br = document.create Element("br");
var btn=document.cr eateElement('in put');
btn.type='submi t';
btn.value='Edit ';

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

var td9 = document.create Element("TD")

var newTextBox = document.create Element('input' );

newTextBox.type = 'textarea';

newTextBox.Text Mode='MultiLine ';

td9.align="cent er";

td9.appendChild (newTextBox)

var td10 = document.create Element("TD")

var newTextBox = document.create Element('input' );

newTextBox.type = 'textarea';

td10.align="cen ter";

newTextBox.rows ="5";

newTextBox.cols ="15";

td10.appendChil d (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.appendChi ld(row);

}

function DeleteRows()

{
alert(s1234);

var tbody = document.getEle mentById('myTab le').getElement sByTagName("TBO DY")[0];
alert("del");

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

for (i=0;i<gy.lengt h;i++)
{
var oldd = document.getEle mentById(gy[i]);

tbody.removeChi ld(oldd);
}
s1234 = 0;
}

</script>

This is html code

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

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

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

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

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

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

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

<td width="12%" align="center" valign="top">To tal<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">Co mments </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="addRow 1('myTable')"/>
<input type="button" value="Delete Selected Rows" onclick="Delete Rows()" />
<input type="button" value="Submit" /> </td>
</tr>

</table>

regards,
moksha

**moksha** · Feb 28 '08, 07:57 AM

Originally posted by vee10

Hi,

This may solve ur problem

rdo = document.create Element('<input type="radio" name="fldID'+nu m+'"/>');
rdo1 = document.create Element('<input type="radio" name="fldID'+nu m+'" />');

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.create Element('<input type="radio" name="fldID'+nu m+'"/>');

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

rdo1.setAttribu te('name',"fldI D'+num+'");

and its not working with Mozilla Firefox .

moksha

**acoder** · Feb 28 '08, 11:34 AM

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** · Feb 29 '08, 05:31 AM

Originally posted by 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?

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** · Feb 29 '08, 08:44 AM

How have you used innerHTML?

**moksha** · Mar 3 '08, 05:45 AM

Originally posted by acoder

How have you used innerHTML?

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

[CODE=javascript]try{
rdo = document.create Element('<input type="radio" name="fldID'+nu m+'"/>');
rdo1 = document.create Element('<input type="radio" name="fldID'+nu m+'" />');

}catch(err){
rdo = document.create Element('input' );
rdo.setAttribut e('type','radio ');
rdo.innerHTML=" fldID'+num+'";


rdo1 = document.create Element('input' );
rdo1.setAttribu te('type','radi o');
rdo1.innerHTML= "fldID'+num +'";


}[/CODE]

doing this i am unable to deselect created radio buttons.

moksha

**acoder** · Mar 3 '08, 10:51 AM

Use innerHTML for both on the parent element:
[CODE=javascript]rdo = '<input type="radio" name="fldID'+nu m+'"/>';
rdo1 = '<input type="radio" name="fldID'+nu m+'" />';
td8.innerHTML += rdo;
// add label, etc.
td8.innerHTML += rdo1;[/CODE]

How to give group name for dynamically created radio buttons.

How to give group name for dynamically created radio buttons.

Comment

Comment

Comment

Comment

Comment

Comment

Comment