Sette inn flere form-elementer onclick

[ZoRaC]

Har følgende skjema:

<form action="" method="POST">
<input type="text" name="navn[]">
</form>
<a href="#" onclick="insertNavnFelt();">

 

Hvordan skal "insertNavnFelt()" se ut, slik at den setter inn enda et "navn[]"-felt i skjemaet hver gang man klikker på linken?

[magicgunnar]

Har følgende skjema:

<form action="" method="POST">
<input type="text" name="navn[]">
</form>
<a href="#" onclick="insertNavnFelt();">

 

Hvordan skal "insertNavnFelt()" se ut, slik at den setter inn enda et "navn[]"-felt i skjemaet hver gang man klikker på linken?

9396420[/snapback]

Tenkte du kanskje noe slikt som:

 

<form id='navn' action="" method="POST">
<input type="text" name="navn[]">
</form>
<a href="#" onclick='insertNavnFelt()'>tull</a>

function insertNavnFelt(){
input = document.createElement('input');
input.type = 'text';
input.name = "navn[]";
document.getElementById('navn').appendChild(input);
}

[ZoRaC]

Nettopp!

 

Men, hvordan kan jeg legge til teksten "Navn: " foran alle tekstboksene?

<form id='navn' action="" method="POST">
Navn: <input type="text" name="navn[]"><br>
</form>
<a href="#" onclick='insertNavnFelt()'>tull</a>

<script>
function insertNavnFelt(){
input = document.createElement('input');
input.type = 'text';
input.name = "navn[]";
br = document.createElement('br');
document.getElementById('navn').appendChild(input);
document.getElementById('navn').appendChild(br);
}</script>

[magicgunnar]

Nettopp!

 

Men, hvordan kan jeg legge til teksten "Navn: " foran alle tekstboksene?

<form id='navn' action="" method="POST">
Navn: <input type="text" name="navn[]"><br>
</form>
<a href="#" onclick='insertNavnFelt()'>tull</a>

<script>
function insertNavnFelt(){
input = document.createElement('input');
input.type = 'text';
input.name = "navn[]";
br = document.createElement('br');
document.getElementById('navn').appendChild(input);
document.getElementById('navn').appendChild(br);
}</script>

9397210[/snapback]

Opprett et element div/span etc. og legg tekst inn i elementet:

tekstenmin = document.createElement('span');
tekstenmin.innerHTML = 'dette er en tekst';
document.getElementById('navn').appendChild(tekstenmin);

Du kan selvfølgelig bruke innerHTML direkte på form-taggen: document.getElementById('navn').innerHTML osv. , men dette er ikke pent, og har også gitt meg mye feilmeldinger i IE.

[ZoRaC]

Aha, takker!

 

Er det mulig å fjerne elementer også?

F.eks at man har lagt til et "navn-element" for mye og ønsker å fjerne det? (sette en link til "delete" ved siden av hver navn-input f.eks)

[magicgunnar]

Aha, takker!

 

Er det mulig å fjerne elementer også?

F.eks at man har lagt til et "navn-element" for mye og ønsker å fjerne det? (sette en link til "delete" ved siden av hver navn-input f.eks)

9397866[/snapback]

 

Jepp det er mulig å få til se: http://www.w3schools.com/htmldom/dom_nodes_access.asp

 

Kode klippet direkte fra nettsiden over:

var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);

Hvor maindiv er id'en til elementet du ønsker å fjerne.

 

Edit: Men da må du altså legge inn unike id'er for alle elementene som er lagt til.

Endret 31. august 2007 av magicgunnar

[ZoRaC]

Slik ble det:

<form id='navn' action="" method="POST">
Navn: <input type="text" name="navn[]"><br>
</form>
<a href="#" onclick='insertNavnFelt()'>Legg til felt</a><br>
<a href="#" onclick='fjernNavnFelt()'>Fjern siste felt</a><br>

<script>
var i = 1;

function insertNavnFelt(){
tekstenmin = document.createElement('span');
tekstenmin.innerHTML = 'Navn: ';
tekstenmin.id = 'navnFelt0' + i;
input = document.createElement('input');
input.type = 'text';
input.name = "navn["+i+"]";
input.id = "navnFelt1" + i;
br = document.createElement('br');
br.id = "navnFelt2"+i;

document.getElementById('navn').appendChild(tekstenmin);
document.getElementById('navn').appendChild(input);
document.getElementById('navn').appendChild(br);

++i;
}

function fjernNavnFelt() {
--i;
for (var j = 0; j <= 3; j++) {
 var x=document.getElementById("navnFelt"+j+i);
 x.parentNode.removeChild(x);
}
}
</script>

 

Ser ut til å virke fint!

[ZoRaC]

Hmm... finnes det ingen lettere måte å gjøre det på?

 

Nå skal jeg for hvert klikk legge til noe sånt

 <tr><td><select name="stilling">
<option value="">VELG</option>
<option value="valg">valg</option>
</select>
</td><td>
<select name="dag">
<option value="">DAG</option>
<option value="1">1</option>
// Osv, ordnes med PHP så den er grei
</select>
</td><td>
<select name="mnd">
<option value="">MND</option>
<option value="1">Jan</option>
// Osv, ordnes med PHP så den er grei
</select>
</td><td>
<select name="aar">
<option value="">ÅR</option>
<option value="2007">2007</option>
// Osv, ordnes med PHP så den er grei
</select>
</td><td>
<input type="text" name="kommentar"></td></tr>

 

Da blir det veldig tungvindt å legge til hvis jeg må ha 2-3 linjer for hvert element... :S

Endret 3. september 2007 av ZoRaC