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 to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dynamic Input form

    Hi,

    I'm trying to make an dynamic input form.

    This is the idea.

    When the user enters the form there are two form elements present
    (1 text input and one teaxtarea).
    Below these is a button saying "add more".
    Each time the user prese's this button there are two form elements (like those before)
    that will be created (whitout refresh).
    The user can generate as mutch as he wants.

    Till this par al works fine.
    I have the following code:

    <script type="text/javascript">
    var i=2
    function CreateFields() {
    document.getElementById("my_div").innerhtml=document.getElementById("my_div") .innerHTML+ '<span class="left" style="width:175px"><label for="option_name'+ i +'">'+ i +' ) Optie naam:</label><br><input type="text" name="option_name'+ i +'" id="option_name'+ i +'" size="20" maxlength="20" /></span><span class="right" style="width:315px" ><label for="option_description'+ i +'">Optie beschrijving</label><br><textarea cols="35" rows="10" name="option_description'+ i +'"></textarea></span><div style="clear:both;width:500px;height:2px"></div>';
    i=i+1
    }
    </script>

    This function is called each time the button is pressed.

    The Problem:


    If the user enters values in the text input an textarea and presses the button to create two more fields
    The enterd values (of the previous fields) are DELETED!!. Not something that you want to happen.
    What can I do to preven this?

    Thanks for the help

  • #2
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you need to look at using document.createElement() to create the new nodes, and to use
    E.g.
    var span= document.createElement('span');
    span.className = 'inputrow';
    var el = document.createElement('input');
    el.type='text';
    el.value='yadda';
    span.appendChild(el)
    var div = document.getElementById('my_div');
    div.appendChild(span);

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so mutch for taking the time to reply

    I got the main thing working now. I only don't know how to create a
    textarea widh 15 rows an 20 cols.
    I tried document.createElement('textarea'), but thats not the way to do it I guess.

    Regards
    Geert

  • #4
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by el_dorito
    I got the main thing working now. I only don't know how to create a
    textarea widh 15 rows an 20 cols.
    I tried document.createElement('textarea'), but thats not the way to do it I guess.
    Heres a working demo
    Code:
    <html><head>
    <script language="JavaScript">
    function addTextArea() {
    // Create the bit of teh DOM tree that we will be inserting into the webpage
    var frag = document.createDocumentFragment();
    var el = document.createElement('textarea');
    el.cols='20';
    el.rows='14';
    el.value='More cheese Grommit?';
    el.onkeyup = function(event) {checkTextInput(event,this)}
    el.className='textarea'; // You need a CSS entry to go with this!!!
    frag.appendChild(el);
    
    // Now stitch this textarea into the document
    var div = document.getElementById('my_div');
    div.appendChild(frag);
    }
    
    // this is the function that reponds to key presses in the textarea
    function checkTextInput(e,el) {
       alert('Key:'+e.keyCode+' pressed in '+el.tagName);
       alert('Current value'+el.value);
       alert('Help! I\'m being held prisoner, they wont let me out.');
       alert('I think they are trying to steal my shoes. Help!!');
       return false;
    }
    </script>
    </head>
    <body>
    <p onclick="addTextArea()">click me to add a text area </p>
    <div id="my_div">
    </div>
    <p>Welcome to the bottom of the page</p>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are to kin

    You just earned your heaven


  •  

    Posting Permissions

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