Aggiungere e rimuovere campo input

[lorenzo84]

Buonasera a tutti.

La cosa che devo fare è semplice. In un form bisogna inserire il numero di bambini e in base al numero scelto mi crea al volo due campi input nei quali inserire l’età.

Dentro al div con id containerbambini
Vengono creati dei tag p tanti quanti il numero selezionato.

Lo script funziona. Ma se dopo aver selezionato 2 ne seleziono 1 me ne mette 3 oltre a quelli già presenti.

Io vorrei che rimuovesse quelli inseriti e rimettesse quelli nuovi in base al nuovo numero selezionato

Io ho scritto questo:

$( “#num_bambini” ).change(function()
{
event.preventDefault();
//$(“#containerbambini p”).remove();
$(“p”).remove(“#containerbambini”);
var num= $(this).val();
for(i=0;i<num;i++)
{
var temp=i+1;
testoagg+=”<p class=’campiagg’>Età “+temp+”: <input type=’text’ name=’eta-“+temp+”‘></p>”;
}
num=0;
$( testoagg ).appendTo(“#containerbambini”);
});

Grazie per l’aiuto

 

[WmbertSea]

Ciao, a parte il problema in questione (e le virgolette inglesi che probabilmente sono frutto della conversione dovuta al copia-incolla), vedo diverse cose che non tornano nello script da te postato. Non capisco come tu possa affermare che lo script funziona, anche solo in parte.

A che ti serve event.preventDefault();?

La stessa variabile event non è dichiarata all'interno della funzione. Solitamente dovrebbe essere specificata come argomento della funzione stessa ma in questo caso non vedo come possa funzionare, a parte il fatto che non capisco proprio l'utilizzo del preventDefault.

La variabile testoagg non è azzerata, né dichiarata, all'interno della funzione. L'operazione che fai con tale variabile (testoagg+= ...) genererebbe un errore, se la variabile non è stata precedentemente dichiarata (a meno che non sia stata dichiarata altrove come variabile globale, il che non avrebbe comunque senso).

La riga $("p").remove("#containerbambini"); non ha molto senso. La funzione remove infatti elimina gli elementi trovati dal primo selettore (cioè "p"), al quale la funzione è applicata, e filtrati in base al selettore specificato (se specificato) come argomento della funzione stessa, cioè "#containerbambini". In pratica gli stai dicendo: rimuovi tutti gli elementi p che però abbiano come id "containerbambini". Non ha molto senso. Sostanzialmente è più corretto, invece, quello commentato nella riga precedente $("#containerbambini p").remove(); per il quale vengono eliminati tutti gli elementi "p" che stanno dentro "#containerbambini".

A parte questo, non vedo il bisogno di rimuovere alcunché se poi devi usare appendTo() per rimpiazzarci qualcosa. Se il tuo scopo è quello di rimpiazzare totalmente il contenuto di "#containerbambini", in questo caso ti basterà utilizzare semplicemente il metodo html().

Ti posto lo script corretto e ripulito, vedi se può andare:

$("#num_bambini").change(function(){
  var testoagg="";
  for(i=1;i<=this.value;i++){
    testoagg+="<p class='campiagg'>Età "+i+": <input type='text' name='eta-"+i+"'></p>";
  }
  $("#containerbambini").html(testoagg);
});

 

[lorenzo84]

Grazie mille per la risposta.... Diciamo che il codice che ho postato era un pò caotico.

 

[Paperino78]

$( “#num_bambini” ).change(function()
{
event.preventDefault();
//$(“#containerbambini p”).remove();
$(“p”).remove(“#containerbambini”);
var num= $(this).val();
for(i=0;i<num;i++)
{
var temp=i+1;
testoagg+=”<p class=’campiagg’>Età “+temp+”: <input type=’text’ name=’eta-“+temp+”‘></p>”;
}
num=0;
$( testoagg ).appendTo(“#containerbambini”);
});

Il codice postato è presente in rete proprio con gli stessi id e nomi, l'ho visto anche io dato che sto cercando di risolvere un problema simile. Conoscendo poco jquery ovviamente si commettono errori fcendo copia ed incolla. Prenderò spunto da voi, io vorrei inserire invece un campo input da una select. Si sa mai che mi torni utile.