Aggiungere e rimuovere campo input

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
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:
PHP:
$( “#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

Utente Attivo
28 Nov 2014
183
29
28
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:
Codice:
$("#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

Utente Attivo
22 Lug 2012
239
0
16
Grazie mille per la risposta.... Diciamo che il codice che ho postato era un pò caotico.
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
PHP:
$( “#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.