PDA

View Full Version : Creating dynamic texbox with unique id



jpaulraj
07-20-2006, 09:24 PM
Guys, the code i've pasted below creates dynamic tables. There are two problems im facing with this code

1. when i generate a new set by clicking on "add additional set" and click on the + button on the second set, it creates a row on the first set !!

2. i need to link up the favcolor and favchoc textbox id's to its parent name (exmple - the fav chocolate and fav color for first set should be id="name_favcolor_1" and id="name_favchoc_1" and for the second set it should be id="name_1_favcolor_1" for line 2 in second set it should be id="name_1_favcolor_2" for the third set id="name_2_favcolor_1").
Please Help me out...


<html>
<head>
<script language="javascript">
//this script is to add the whole block - name and favourites
function addEvent()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);

newdiv.innerHTML = '<table width="100%" cellpadding="0" cellspacing="0">'
+ '<tr>'
+ '<td width="32%">Name</td>'
+ '<td width="64%" colspan="3" align="left"><input name="name_'+num+'" type="text" id="name_'+num+'" size="35" /></td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="4"><table width="100%" cellpadding="0" cellspacing="0">'
+ '<tr>'
+ '<td width="33%">fav chocolate :</td>'
+ '<td width="20%" align="left"><input type="text" name="name_favchoc_'+num+'" id="name_favchoc_'+num+'" size="10" /></td>'
+ '<td width="24%" align="left">Fav Color: </td>'
+ '<td width="20%" align="left"><input type="text" name="name_favcolor_'+num+'" id="name_favcolor_'+num+'" size="10" /></td>'
+ '</tr>'
+ '</table></td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="4"><div id="polDiv"></div></td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="4"><input name="hidden" type="hidden" id="theValue" value="0" />'
+ '<input type="submit" name="Submit" value="+" onclick="addEventpol();" />'
+ '</td>'
+ '</tr>'
+ '</table>';

ni.appendChild(newdiv);
}

//script to create dob and fav chocolate

function addEventpol()
{
var ni = document.getElementById('polDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "pol"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);


newdiv.innerHTML = '<table width="100%" cellpadding="0" cellspacing="0">'
+ '<tr>'
+ '<td width="33%">fav chocolate :</td>'
+ '<td width="20%" align="left"><input type="text" name="name_favchoc_'+num+'" id="name_favchoc_'+num+'" size="10" /></td>'
+ '<td width="24%" align="left">Fav Color: </td>'
+ '<td width="20%" align="left"><input type="text" name="name_favcolor_'+num+'" id="name_favcolor_'+num+'" size="10" /></td>'
+ '</tr>'
+ '</table>';

ni.appendChild(newdiv);
}
</script>
</head>

<body>
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><h5>
<!--Enter Content Here-->
Add Dynamic Textbox </h5></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100"><strong>Header</strong></td>
</tr>
<tr>
<td><table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="32%">Name</td>
<td width="64%" colspan="3" align="left"><input name="seta_name_1" type="text" id="seta_name_1" size="35" /></td>
</tr>
<tr>
<td colspan="4"><table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="33%">fav chocolate :</td>
<td width="20%" align="left"><input type="text" name="seta_favchoc_1" id="seta_favchoc_1" size="10" /></td>
<td width="24%" align="left">Fav Color: </td>
<td width="20%" align="left"><input type="text" name="seta_favcolor_1" id="seta_favcolor_1" size="10" /></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4"><div id="polDiv"></div></td>
</tr>
<tr>
<td colspan="4"><input name="hidden" type="hidden" id="theValue" value="0" />
<input type="submit" name="Submit" value="+" onclick="addEventpol();" />
</td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="right"><input name="hidden" type="hidden" id="theValue" value="0" />
<input type="submit" name="Submit2" value="Add Additional Set" onclick="addEvent();" />
</td>
</tr>
<tr>
<td><div id="myDiv"></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

Thanks

jpaulraj
07-21-2006, 03:03 PM
Please Help