please help me with dynamically adding textfields

bevan · 01-26-2006, 05:34 PM

I have this script that adds a new row textfields of text fields when the user clicks the button...

but I want the function to add 5 new fields of varying sizes instead of just 2.

can anyone help?

cheers

bevan

the code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript" type="text/javascript">
var Cnt=2;

function addField(area,field,limit) {
if(!document.getElementById) return;
var field_area=document.getElementById(area);
var li=document.createElement('LI');
field_area.appendChild(li);
var tb=document.createElement('INPUT');
tb.name='friend_A'+Cnt;
li.appendChild(tb);
tb=tb.cloneNode(false);
tb.name='friend_B'+Cnt;
li.appendChild(tb);
Cnt++;
}

</script>

</head>

<body>
<form name="frm" method="POST">
<br />
<ol id="friends_area"><li >
<input name="friend_1" type="text" id="friend_A1" size="4" />
<input name="friend_12" type="text" id="friend_B1" size="20" />
<input name="friend_123" type="text" id="friend_C1" size="10">
<input name="friend_1234" type="text" id="friend_D1" size="10">
<input name="friend_12345" type="text" id="friend_E1" size="7">
</li>
</ol>
<input type="button" value="Add Another row" onClick="addField('friends_area','friend_',10);" />

<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

vwphillips · 01-26-2006, 05:55 PM

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript" type="text/javascript">
var Cnt=2;

function addField(area,field,limit) {
 if (Cnt==limit){ return; }
 if(!document.getElementById) return;
 var field_area=document.getElementById(area);
 var li=field_area.getElementsByTagName('LI')[0].cloneNode(true);
 field_area.appendChild(li);
 var ips=li.getElementsByTagName('INPUT');
 for (var zxc0=0;zxc0<ips.length;zxc0++){
  ips[zxc0].value='';
  ips[zxc0].name='friend_'+Cnt+zxc0;
  ips[zxc0].id='friend_A'+Cnt+zxc0;
  ips[zxc0].value=ips[zxc0].id; // just testing
 }
 Cnt++;
}

</script>


</head>

<body>
<form name="frm" method="POST">
<br />
<ol id="friends_area">
<li >
<input name="friend_11" type="text" id="friend_A11" size="4" />
<input name="friend_12" type="text" id="friend_A12" size="20" />
<input name="friend_13" type="text" id="friend_A13" size="10">
<input name="friend_14" type="text" id="friend_A14" size="10">
<input name="friend_15" type="text" id="friend_A15" size="7">
</li>
</ol>
<input type="button" value="Add Another row" onClick="addField('friends_area','friend_',10);" />

<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

bevan · 01-26-2006, 06:00 PM

amazing!! youre the best vwphillps!

best wishes

bevan

bevan · 01-26-2006, 06:08 PM

ha ha, sorry

can u make it go further than 9 rows?

(I am trying to teach myself this stuff but its tough starting off, you know,)

vwphillips · 01-26-2006, 06:45 PM

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript" type="text/javascript">
var Cnt=2;

function addField(area,field,limit) {
 if (Cnt>limit){ return; }
 if(!document.getElementById) return;
 var field_area=document.getElementById(area);
 var li=field_area.getElementsByTagName('LI')[0].cloneNode(true);
 field_area.appendChild(li);
 var ips=li.getElementsByTagName('INPUT');
 for (var zxc0=0;zxc0<ips.length;zxc0++){
  ips[zxc0].value='';
  ips[zxc0].name='friend_'+Cnt+zxc0;
  ips[zxc0].id='friend_A'+Cnt+zxc0;
 }
 Cnt++;
}

</script>


</head>

<body>
Its all according how you interparate last parameter of addField( but just assign digits to meet requirement<br>
<form name="frm" method="POST">
<br />
<ol id="friends_area">
<li >
<input name="friend_11" type="text" id="friend_A11" size="4" />
<input name="friend_12" type="text" id="friend_A12" size="20" />
<input name="friend_13" type="text" id="friend_A13" size="10">
<input name="friend_14" type="text" id="friend_A14" size="10">
<input name="friend_15" type="text" id="friend_A15" size="7">
</li>
</ol>
<input type="button" value="Add Another row" onClick="addField('friends_area','friend_',44);" />
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

bevan · 01-26-2006, 07:13 PM

thanx vic got it,

have you seen my other post about adding the values and displaying them?

last one I promise.

vwphillips · 01-26-2006, 07:35 PM

yes

no problem, ask away