www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Oct 2004
    Location
    Canada
    Posts
    2

    Red face Dynamically adding text fields with "add item" button

    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

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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>
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Sep 2004
    Location
    Midwest
    Posts
    1,629
    <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>

  4. #4
    Join Date
    Oct 2004
    Posts
    1,118
    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?

  5. #5
    Join Date
    Jul 2004
    Location
    Singapore, SG
    Posts
    654
    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.

  6. #6
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles