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
211
33
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
E Aggiungere Parole PHP 1
A aggiungere stringa all'inizio di ogni riga di un file txt PHP 3
F Aggiungere automaticamente sito a home del telefono HTML e CSS 2
C Aggiungere blocco dati Javascript 6
F [PHP] Aggiungere ruolo per accedere alle pagine PHP 2
Cosina Aggiungere pulsante pause/play a slideshow Javascript 0
A Twitter aggiungere tweet a campagna esistente o salvare pubblico Social Media Marketing 0
S aggiungere colonna date in una tabella già esistente Database 0
P [PHP] Aggiungere un mio script a prestashop? PHP 10
Shyson [PHP] Aggiungere link al codice PHP 0
D Aggiungere file .css esterno su Android HTML e CSS 4
R [PHP] Aggiungere 90 minuti a stringa orario PHP 1
brasoft2019 [PHP] aggiungere timestamp in tabella correlata PHP 0
P [PHP] Aggiungere giorni e stampare risultato da data inserita in input PHP 3
L [Java] Aggiungere elementi ad array JSON Java 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
C [PHP] Aggiungere pulsante paypal PHP 2
M [javascript] Aggiungere eventi al caricamento Javascript 0
M aggiungere streaming audio a pagina html HTML e CSS 2
trattorino [PHP] sql aggiungere dato in una tabella senza cancellare contenuto PHP 6
Francesco Oliviero Aggiungere comando a pulsante HTML HTML e CSS 1
felino [WordPress] [WooCommerce] Ordine: aggiungere nuovi stati con notifica email al cliente WordPress 4
L [Photoshop] Aggiungere file video in timeline Photoshop 1
D [Photoshop] aggiungere piu tracce a immagine Photoshop 4
D Aggiungere slash finale ad URL con .htaccess Web Server 2
G [Javascript] aggiungere sub-namespace Javascript 0
L Aggiungere contenuto con ajax durante lo scroll jQuery 1
felino [WordPress] [Woocommerce] Aggiungere un costo addizionale per prodotto WordPress 0
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
elpirata Aggiungere un disco ssd separato dal raid 1 Hardware 0
S (VENDO) Possiamo aggiungere fino a 20000 Membri nei Gruppi Facebook Italiani Annunci servizi di Social Media Marketing 2
trattorino [PHP] aggiungere html in un codice PHP 0
otto9due Aggiungere n. giorni ad una data nel datepiker jQuery 4
R [HTML] Aggiungere una tabella a fianco di altre tabelle... HTML e CSS 6
F aggiungere codice dopo n elementi jquery jQuery 1
L [Javascript] Aggiungere una riga ad una tabella Javascript 5
asevenx [Javascript] aggiungere righe con select da database e calcolo sconto in automatico Javascript 0
Monital [Javascript] decidere dove aggiungere il campo dinamicamente Javascript 1
asevenx [Javascript] aggiungere dinamicamente un campo di un form Javascript 3
ACarty [Javascript] Aggiungere link alle foto. Javascript 19
matteoraggi Aggiungere filtri a woocommerce WordPress 0
S appinventor, aggiungere tasto registrazione Sviluppo app per Android 1
V Aggiungere un img nel background Sviluppo app per Android 1
felino Capability: aggiungere cap all'editor per admin.php?page WordPress 0
E problema per aggiungere un database mdf da visual studio .NET Framework 9
M Aggiungere input text dopo aver selezionato un campo da una select option Presentati al Forum 0
M aggiungere dei div non sostituirli Javascript 1
P Aggiungere campo input da una select jQuery 1
U Aggiungere immagini in una cartella ASP.NET 1

Discussioni simili