Dynamically adding text fields with "add item" button

**wc2004** · 10-25-2004 12:12 PM

Hi,

I'm trying to add text field (<input>) in my form by clicking on a "add" button. For example,

<form id="form1"... >
<input type="text" name="item1"/><br />
<input type="text" name="item2" /><br />
<input type="text" name="item3" />
<input type="button" name="addItem" onclick="add()" value="Add item" />
....

what will i need to put in the javascript? any suggestions? Thanks!

wc

**Jona** · 10-25-2004 12:33 PM

Code:

<form id="form1" action="" method="post"><fieldset>
 <legend>Form</legend>
 <label><input type="button" name="addItem" onclick="this.form.childNodes[0].appendChild(document.createElement('INPUT')); this.form.childNodes[0].appendChild(document.createElement('BR'));" value="Add item" /></label><br />
 <label><input type="text" name="item1"/></label><br />
 <label><input type="text" name="item2" /></label><br />
 <label><input type="text" name="item3" /></label><br />
</fieldset></form>

**Warren86** · 10-25-2004 12:43 PM

<HTML>
<Head>
<Script Language=JavaScript>

function insertRow(isTable){

index = isTable.rows.length;
nextRow = isTable.insertRow(index);
isText = nextRow.insertCell(0);
txtArea = nextRow.insertCell(1);
index++;
index = index.toString();
nameStr = "item"+index;
txtStr = "Item "+index;
isText.innerHTML = txtStr;
txtArea.innerHTML = "<input type=text name="+nameStr+" size=5>";
}

</Script>
</Head>
<Body>
<Form name='Form1'>
<Table id='dynTable' cellpadding=5 cellspacing=5 border=1>
<TR><TD> Item 1</TD><TD><input type="text" name="item1" size="5"></TD></TR>
<TR><TD> Item 2</TD><TD><input type="text" name="item2" size="5"></TD></TR>
<TR><TD> Item 3</TD><TD><input type="text" name="item3" size="5"></TD></TR>
</Table>
</Form>
<input type=button value="Insert row" onclick="insertRow(dynTable)" >
</Body>
</HTML>

**7stud** · 10-26-2004 01:27 AM

Interesting code. I have some questions about it:

1)

Code:

function insertRow(isTable){

index = isTable.rows.length;
nextRow = isTable.insertRow(index);
,,,
,,,

Does that function call itself recursively?

2)

Code:

index = index.toString(); 
nameStr = "item"+index;

What's the point of the first line?

3)

Code:

isText.innerHTML = txtStr;
txtArea.innerHTML = "<input type=text name="+nameStr+" size=5>";

Is innerHTML deprecated?

**javaNoobie** · 10-26-2004 01:44 AM

Does that function call itself recursively?

No. They belong to different objects.

What's the point of the first line?

Good question.. Probably some resource management stuff.. I'm not sure about that too

Is innerHTML deprecated?

It isnt supported by other browsers except IE i believe.. better to use DOM.

**Jona** · 10-26-2004 03:29 PM

Originally posted by javaNoobie
It isnt supported by other browsers except IE i believe.. better to use DOM.

The innerHTML property is IE-proprietary and should not be used, though it works in all modern browsers: Netscape 6+, Mozilla, Firefox, Internet Explorer (5.1+, I believe), and Opera (at least it does in my version). Still, the DOM should be used to insert new elements and tables should not be used to format your HTML forms.

Thread: Dynamically adding text fields with "add item" button

Thread Tools

Display

Dynamically adding text fields with "add item" button

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions