...

View Full Version : please help me with dynamically adding textfields



bevan
01-26-2006, 06: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>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

vwphillips
01-26-2006, 06:55 PM
<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, 07:00 PM
amazing!! youre the best vwphillps!

best wishes

bevan

bevan
01-26-2006, 07: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, 07:45 PM
<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, 08:13 PM
thanx vic got it,

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

last one I promise. :thumbsup:

vwphillips
01-26-2006, 08:35 PM
yes

no problem, ask away



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum