Dynamisch velden in formulier

[Wooter]

Ik ben op dit moment bezig met een formulier waar als men op knop drukt dat er een extra tekstveld wordt aangemaakt. Dit is echt maar 1 tekstveld wat wordt aangemaakt.

Graag zou ik willen dat er twee nieuwe velden worden aangemaakt als ik op de knop druk.

De code is als volgt:

function addField() {
var tbody = document.getElementById("tblBody");
var ctr = tbody.getElementsByTagName("input").length + 1;
var input;
if (document.all){ //input.name doesn't work in IE
input = document.createElement('<input name="friend_'+ctr+'">');
}
else{
input = document.createElement('input');
input.name = "friend_"+ctr;
}
input.id = input.name;
input.type = "text";
input.value = "";
input.className = "textfield";
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(ctr+". "));
cell.appendChild(input);
var row = document.createElement('tr');
row.appendChild(cell);
tbody.appendChild(row);
}
...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody id="tblBody">
<tr>
<td height="30">
1. <input name="friend_1" type="text" class="textfield" id="friend_1" />
</td>
</tr>
<tr>
<td height="30">
2. <input name="friend_2" type="text" class="textfield" id="friend_2" />
</td>
</tr>
<tr>
<td height="30">
3. <input name="friend_3" type="text" class="textfield" id="friend_3" />
</td>
</tr>
<tr>
<td height="30">
4. <input name="friend_4" type="text" class="textfield" id="friend_4" />
</td>
</tr>
<!-- New fields go here -->

</tbody>
</table>

Alvast mijn grote dank

 

[That Guy]

erhm, 2x de 'addField()' functie aanroepen?

<input type='submit' .... onclick='addField();addField();' />

niet erg netjes natuurlijk. Je kan het ook zo doen:

//js
function addField(num) {

 //zorg dat er altijd iig 1 wordt gemaakt, als er bv geen param wordt gegeven:
 var aantal = num || 1;

 for(var i=1;i<aantal;i++){

   var tbody = document.getElementById("tblBody");
   var ctr = tbody.getElementsByTagName("input").length + 1;
   var input;
   if (document.all){ //input.name doesn't work in IE
      input = document.createElement('<input name="friend_'+ctr+'">');
   }else{
      input = document.createElement('input');
      input.name = "friend_"+ctr;
   }
   input.id = input.name;
   input.type = "text";
   input.value = "";
   input.className = "textfield";
   var cell = document.createElement('td');
   cell.appendChild(document.createTextNode(ctr+". "));
   cell.appendChild(input);
   var row = document.createElement('tr');
   row.appendChild(cell);
   tbody.appendChild(row);

 }
}

dan wordt het:

<input type='submit' .... onclick='addField(2);' />

 

[Wooter]

Mijn dank is groot

Nog 1 kleine vraag. Hoe krijg ik de velden achter elkaar op 1 regel in plaats van 2 onder elkaar?