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
    Dec 2002
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question adding fields to form onclick

    I'm trying to make a form where, when a button is clicked, it adds another field for data entry. I need this to work with IE and Firefox. As it seems innerHTML works with firefox, my first instinct was to try that, however it reacts a bit differently in firefox (it clears previous fields when a new field is added.)

    Code:
    <html>
    <head>
    <script>
    function addrow(){
    form1.innerHTML += "<input type='text'><br>";
    }
    </script>
    </head>
    
    <body>
    <form id="form1">
    <input type='text'><br>
    </form>
    <button onclick="addrow()">Add Row</button>
    </body>
    </html>
    Anyhoo... it doesn't have to be innerHTML, either... just has to work with IE and FF. What is a good way to do this?
    Last edited by Shecky; 01-24-2005 at 12:13 PM.
    seldom ruined but by myself

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Something like this should work...

    Code:
    <script type="text/javascript">
      function addrow(insertHere){
       var div = document.createElement ('DIV');
       var input = document.createElement ('INPUT');
           input.type = 'text';
    
           div.appendChild(input);
           insertHere.parentNode.insertBefore(div,insertHere);
      }
    </script>
    </head>
    
    <body>
    <form id="form1" style="border:1px solid black">
    <input type='text'><br>
    <button onclick="addrow(this)">Add Row</button>
    </form>
    .....Willy

    BTW: What's your button doing outside of the form tags??

  • #3
    Regular Coder
    Join Date
    Dec 2002
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    your code (above)
    doesn't seem to work in firefox.
    seldom ruined but by myself

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Yes it does. The form is being submitted and so the page is reloading.

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats because your button is acting like a submit and trying to submit the form... I merely offered a script using the little information you provided as an example... It was not and is not my intention to create an entire form for you, particularly since I am not privy to all of your requirements... Change your <button... to <input type="button" and it will work as intended...

    Did you note my original question of why that button was outside of your form tag... And what about a name or id??

    I'm out of here...
    Good Luck;

    .....Willy

  • #6
    Regular Coder
    Join Date
    Dec 2002
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks
    Last edited by Shecky; 01-25-2005 at 01:05 AM.
    seldom ruined but by myself


  •  

    Posting Permissions

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