Aggiungere input dinamicamente con CSS

**Begins** · 01-04-2017, 16:51

Ciao a tutti!
Qualche tempo fa su questo forum nella sezione Javascript si parlava di come aggiungere un campo input su un form dinamicamente ogni volta che si preme un tasto aggiungi.
Un utente mi ha suggerito che si può fare anche con CSS e la cosa mi ha molto incuriosito.
Qualcuno sa dirmi come bisognerebbe procedere?
Ho provato a cercare in rete ma nessuno ne parla!

Grazie mille!

**KillerWorm** · 02-04-2017, 18:35

Ciao, giusto per completezza, e per chiarire, riporto qui il link alla discussione a cui fai riferimento:
http://forum.html.it/forum/showthrea...readid=2952650

Qui il mio intervento:

Se fosse solo questione di una riga, potresti risolvere in diverso modo. Ad esempio potresti già strutturare la parte html con la nuova riga, inserendo magari i vari campi dentro un contenitore (ad esempio un semplice div) che renderai inizialmente nascosto via css (con display:none) e attraverso il pulsante potresti semplicemente renderlo visibile.

Ora, a scanso di equivoci, non ho scritto che avresti potuto creare dinamicamente quegli input col CSS, ma semplicemente avresti potuto nasconderli (con CSS) dopo averli già inseriti sul tuo HTML, e quindi visualizzarli poi attraverso un pulsante (con un po' di JavaScript che interviene sul CSS degli elementi in questione).

Qui un esempio (minimale) per chiarire ogni dubbio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
  
    <div>Qui la tua riga di input o quello che è</div>
    
    <div id="nuova_riga" style="display: none">Qui la nuova riga visualizzata tramite pulsante</div>
    
    <input type="button" value="Click qui per visualizzare nuova riga" onclick="
      getElementById('nuova_riga').style.display = 'block';   // visualizzo la nuova riga (che era nascosta)
      this.style.display = 'none';                            // nascondo questo pulsante che non serve più
    ">
    
  </body>
</html>

Per cui, ripeto, se fosse stata questione di una riga che doveva saltare fuori al click del pulsante, l'avresti potuta inserire già nell'html per poi mostrarla come nell'esempio.
E' chiaro che potresti fare una cosa analoga anche per più righe, ma in tal caso ci sarebbe un dispendio di codice inutile, perché si risolverebbe in modo più pulito, dinamico e performante, con l'uso di JavaScript, così come alla fine ti è stato giustamente suggerito da badaze.

Non ho risposto sull'altra discussione perché, dopo quel mio intervento, hai indicato, appunto, che si trattava di più righe; e alla tua successiva richiesta, ti ha risposto lo stesso badaze:

Originariamente inviata da Begins

Ne approfitto per chiedere, visto che mi ha incuriosito, se la soluzione con CSS si può applicare solo se la riga da aggiungere è una sola, o se si può fare anche con più righe come nel mio caso specifico!

Originariamente inviata da badaze

Si puo' fare di tutto (volendo). Nel tuo caso sarebbe una perdita di tempo.

In conclusione, nel tuo caso è più opportuna la soluzione JavaScript.

Discussione: Aggiungere input dinamicamente con CSS

Strumenti discussione

Ricerca discussione

Visualizza

Aggiungere input dinamicamente con CSS

Permessi di invio