Problema semplice script per aggiungere un campo input

25-11-2013, 18.12.15

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. ..

**radiolanversilia** · 02-02-2014, 15.36.26

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>

Discussione: Problema semplice script per aggiungere un campo input

LinkBack

Strumenti discussione

Display

Problema semplice script per aggiungere un campo input

Regole di scrittura