www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] adding new form elements dynamically

  1. #1
    Join Date
    Dec 2009
    Posts
    11

    resolved [RESOLVED] adding new form elements dynamically

    Hello everyone, im new to this, so forgive me if I make any mistakes. Basically, I have a created a JavaScript code to add new form elements when the user clicks the button. I have one glitch, and it is that the new form elements always contain information entered into the initial form. Is there a way to create these fields with them being empty?

    Here is my JavaScript code:
    Code:
    <script type="text/javascript">
    function func()
    {
    	
    	var el=document.getElementById('childinfo').cloneNode(true)
    
    	document.body.appendChild(el)
    	
    	var insertHere = document.getElementById('writeroot');
    	insertHere.parentNode.insertBefore(el,insertHere);
    	
    
    }
    </script>
    
    Heres the html:
    
    <table width="635" border="0" id="childinfo">
      <tr>
        <td width="157"><strong>Title: </strong></td>
        <td width="468"><select name="select2" size="1">
          <option value="0">Please Select...</option>
          <option>Mr</option>
          <option>Mrs</option>
          <option>Miss</option>
          <option>Ms</option>
        </select></td>
      </tr>
      <tr>
        <td><strong>First Name: <br />
        </strong></td>
        <td><input type="text" name="textfield29" /></td>
      </tr>
      <tr>
        <td><strong>Surname:</strong></td>
        <td><input type="text" name="textfield30" /></td>
      </tr>
      <tr>
        <td><strong>D.O.B:</strong></td>
        <td><input name="textfield52"  type="text" onfocus="if (this.value == 'dd/mm/yyyy') {this.value=''}" onblur="if(this.value == '') { this.value='dd/mm/yyyy'};return checkdate(this);" value="dd/mm/yyyy" maxlength="10"/></td>
      </tr>
      <tr>
        <td><strong>Chosen sport: </strong></td>
        <td><select name="select4" size="1">
          <option>Please Select...</option>
          <option>Football</option>
          <option>Tennis</option>
          <option>Basketball</option>
          <option>Athletics</option>
          <option>Badminton </option>
        </select>    </td>
      
      </tr>
      </table>
    thank you in advance
    Last edited by Kor; 12-15-2009 at 02:29 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Change their values before inserting into the document.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Dec 2009
    Posts
    11
    the problem im having is if i chqnge their values, its still copying whatever is in the initial fields into the new created ones. It's probably a minor mistake but i cant seem to solve this. Please help!

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    you must clone the element before the changes. That means you must perform the clone operation onload, than to repeat the cloning each time immediately after the append.

    Take care... I see in your code that you clone an element with a certain id. You must change that id for the clone (and all the ids of its childnodes) because the id must be unique on document/session. You probably will need to change the name attributes as well, if the server-side application (to whom you might submit data) is not instructed to work with arrays of names in query.
    Last edited by Kor; 12-15-2009 at 04:52 AM.

  5. #5
    Join Date
    Dec 2009
    Posts
    11
    thanks kor, i will try that and let you know how it goes.

  6. #6
    Join Date
    Dec 2009
    Posts
    11
    iv changed my JavaScript to this and it works great now:

    <script type="text/javascript">
    var counter = 0;

    function moreFields() {
    counter++;
    var newFields = document.getElementById('childinfo').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
    var theName = newField[i].name
    if (theName)
    newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
    var aInput=newFields.getElementsByTagName('input');
    aInput[0].value=' ';
    }

    I added the line var aInput=newFields.getElementsByTagName('input');
    aInput[0].value=''; i got this line from one of your previous posts Fang, and it worked really well...thank you all for your help.
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles