[RESOLVED] adding new form elements dynamically

[sokand]

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:

<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

[Fang]

Change their values before inserting into the document.

[sokand]

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!

[Kor]

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.

[sokand]

thanks kor, i will try that and let you know how it goes.

[sokand]

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>