Problema semplice script per aggiungere un campo input

Printable View

25-11-2013, 18.12.15

Problema semplice script per aggiungere un campo input

Salve a tutti! Ho scritto un semplicissimo script, in pratica si hanno due campi input di base, al quale l'utente (tramite il tasto "aggiungi") può aggiungerne altri a piacimento. Lo script funziona, tuttavia se io compilo con dei valori i campi, e poi vado ad aggiungere un nuovo campo con l'apposito tasto, vengono resettati anche i campi già compilati.

Codice HTML:

<html> <head> <script> var n_campi=2; function Aggiungi(){ n_campi++; document.getElementById("campi").innerHTML = document.getElementById("campi").innerHTML + "<input type=\"text\" name=\"campo"+n_campi+"\" id=\"campo"+n_campi+"\" value=\"0\"/><br>"; } </script> </head> <body> <div id="campi"> <input type="text" name="campo1" id="campo1" value="0"/><br> <input type="text" name="campo2" id="campo2" value="0"/><br> </div> <input type="button" value="Aggiungi" onclick="Aggiungi();"/> </body> </html>

Quello che non capisco è perchè si resettano i campi, in pratica con la funzione Aggiungi() gli dico di scrivere nel div che contiene i campi, i campi già presenti + quello nuovo. Qualcuno mi sa spiegare dove sbaglio? Spero di essere stato chiaro
02-02-2014, 11.48.32

Prova a modificare la funzione Aggiungi così

Codice:

function Aggiungi () { n_campi++; var input = document.createElement ("input"); input.setAttribute ("type", "text"); input.setAttribure ("name", "campo" + n_campi); input.setAttribure ("id, "campo" + n_campi); input.setAttribure ("value", "0"); document.getElementById ("campi").appendChild (input); }

In pratica anzi che riscrivere tutti gli input ne aggiungi uno al fondo. ..
02-02-2014, 15.36.26
radiolanversilia

Prova così

<html>
<head>
<script>
var n_campi=2;
function Aggiungi()
{
n_campi++;
var para=document.createElement("input");
para.setAttribute("type", "text");
para.setAttribute("name", "campo"+n_campi);
para.setAttribute("value", 0);
var element=document.getElementById("campi");
element.appendChild(para);
var para=document.createElement("br");
var element=document.getElementById("campi");
element.appendChild(para);
}
</script>
</head>

<body>
<div id="campi">
<input type="text" name="campo1" id="campo1" value="0"/><br>
<input type="text" name="campo2" id="campo2" value="0"/><br>
</div>
<input type="button" value="Aggiungi" onclick="Aggiungi();"/>
</body>
</html>