Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    please help me with dynamically adding textfields

    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>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    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>

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    amazing!! youre the best vwphillps!

    best wishes

    bevan

  • #4
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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,)

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    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>

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanx vic got it,

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

    last one I promise.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    yes

    no problem, ask away


  •  

    Posting Permissions

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