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...

Code:

<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

Thread: Creating dynamic texbox with unique id

Thread Tools

Search Thread

Creating dynamic texbox with unique id

Bookmarks

Bookmarks

Posting Permissions