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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Adding Form Fields on The Fly

    Hey Guys,

    I have a basic form with a contact listing. I want to be able to hit "+" for example somewhere on the form, where it then displays (fades in, adds in, however) a duplicate of say three fields. The rows would look something like this:

    Contact Name: Contact Address: Contact Phone
    Contact Name: Contact Address: Contact Phone
    Contact Name: Contact Address: Contact Phone

    In theory, you could also select a "-" button to remove a contact listing if you accidentally added too many. Basically it could be adding and removing div's on the fly.

    Any idea how I could do this with? Any suggestions would be appreciated.

    Thanks.

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Location
    United Kingdom
    Posts
    159
    Thanks
    2
    Thanked 15 Times in 15 Posts
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    <!--
    
    function add()
    {
    var bdiv = document.getElementById('myDiv');
    var noi = document.getElementById('theValue');
    var num = (document.getElementById("theValue").value -1)+ 2;
    noi.value = num;
    var divIdName = "my"+num+"Div";
    var newdiv = document.createElement('div');
    newdiv.setAttribute("id",divIdName);
    newdiv.style.border = "dashed 1px";
    newdiv.style.marginBottom = "10px";
    newdiv.innerHTML = "<br />Contact Name: <input type='text' name='conName' /><br /><br />Contact Address: <input type='text' name='conAddress' /><br /><br />Contact Phone: <input type='text' name='conPhone' /> <input type='button' onclick=\"remove(\'"+divIdName+"\')\" value='-'><bR><br>";
    
    bdiv.appendChild(newdiv);
    }
    
    function remove(divNum)
    {
    var d = document.getElementById('myDiv');
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
    }
    
    //-->
    </script>
    </head>
    
    <body>
    <input type="button" onClick="add();" value="+">
    <input type="hidden" value="0" id="theValue" />
    
    <div id="myDiv"> </div>
    
    </body>
    </html>


    Hope this helps!




    ~Jordan
    Remember The Thank You Button Is Your Friend =]

    [ PHP / Javascript / VisualBasic / HTML / DHTML / CSS / .NET / MySQL ]

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    That's great! I'll work with it. Thanks so much.

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    So this works great, in IE. When trying to use it in FF, it doesn't do anything. There are no JS errors; it just doesn't respond on click.

    Any thoughts on why this might be happening?

    Thanks.

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I'd like to say it's an innerHTML issue, but I have other examples of that which work in FF ..

    ?

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Nevermind. Got it working.

    Thanks.


  •  

    Posting Permissions

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