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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post dynamically adding textfields

    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>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <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>

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks vw!

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

    cheers

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 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=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>

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    woo hooo!

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

    really appreciated

    bevan


  •  

    Posting Permissions

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