dynamically adding textfields

bevan

01-22-2006, 04:24 PM

HI, I have this script that lets the user add as many text fields as they need by clicking a button.(see below)

but I need to modify it so when the button is clicked it adds two text fields in a row instad of one.

please help i am really new to this stuff?

Bevan

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

function addField(area,field,limit) {
if(!document.getElementById) return;
var field_area = document.getElementById(area);
var all_inputs = field_area.getElementsByTagName("input");

var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;

if(count > limit && limit > 0) return;

if(document.createElement) {
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text";
li.appendChild(input);
field_area.appendChild(li);
} else {
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
}
}

</script>

</head>

<body>
<form name="frm" method="POST">
<strong>Fields</strong><br />
<ol id="friends_area">
<li><input type="text" name="friend_1" id="friend_1" /></li>
</ol>
<input type="button" value="Add Another Field" onclick="addField('friends_area','friend_',10);" />
<br /><br />
</form>

</body>
</html>

vwphillips

01-22-2006, 04:41 PM

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

function addField(area,field,limit,zxc) {
if(!document.getElementById) return;
var field_area = document.getElementById(area);
var all_inputs = field_area.getElementsByTagName("input");

var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;

if(count > limit && limit > 0) return;

if(document.createElement) {
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text";
li.appendChild(input);
field_area.appendChild(li);
} else {
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
}
if (!zxc){ addField(area,field,limit,true); }
}

</script>

</head>

<body>
<form name="frm" method="POST">
<strong>Fields</strong><br />
<ol id="friends_area">
<li><input type="text" name="friend_1" id="friend_1" /></li>
</ol>
<input type="button" value="Add Another Field" onclick="addField('friends_area','friend_',10);" />
<br /><br />
</form>

</body>
</html>

bevan

01-22-2006, 04:59 PM

thanks vw!

is there any way the two textfields could be next to each other rather than one on top of another?

cheers

vwphillips

01-22-2006, 05:59 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=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">
<strong>Fields</strong><br />
<ol id="friends_area">
<li ><input type="text" name="friend_1" id="friend_A1" /><input type="text" name="friend_1" id="friend_B1" /></li>
</ol>
<input type="button" value="Add Another Field" onclick="addField('friends_area','friend_',10);" />
<br /><br />
</form>

</body>
</html>

bevan

01-22-2006, 06:12 PM

woo hooo!

VW, you the man!!! (or woman)

really appreciated

bevan