Uso di jQuery per aggiungere/rimuovere un campo in un form

Per un progetto che sto sviluppando ho avuto la necessità di crare una tabella non conoscendo a priori i campi che la componevano. Cioè la tabella doveva essere creata in maniera dinamica, con la possibilità di aggiungere o rimuovere i campi a piacere durante la creazione. Dopo un attenta analisi e un approfondito studio sull’argomento ho risolto utilizzando le librerie jQuery.

Il risultato è questo: demo

Nel pacchetto

 » jQuery add rem field form.zip (33,0 KiB, 755 hits)

• index.htm
• scripts.js

Passo 1 – file HTML

Riga di codice importantissima da non modificare:

<div id="campi"></div>

infatti è all’interno di questo “div” che verranno costruiti i vari campi.

Passo 2 – file JS

Vi sono due funzioni:

La funzione addFormField() crea un campo di input e lo inserisce nel form. Supponendo, per esempio, di inserire due campi, all’interno del “div” di cui sopra compariranno le linee di codice:

<p id='row1'>
   <label for='txt1'>Campo 1&nbsp;
       <input type='text' size='20' name='txt[]' id='txt1'/>&nbsp;&nbsp;
       <a href='#' onClick='removeFormField("#row1"); return false;'>Rimuovi</a>
    </label>
</p>
<p id='row2'>
   <label for='txt2'>Campo 2&nbsp;
     <input type='text' size='20' name='txt[]' id='txt2'/>&nbsp;&nbsp;
     <a href='#' onClick='removeFormField("#row2"); return false;'>Rimuovi</a>
   </label>
</p>

Ho inserito “Rimuovi” invece dell’immagine dell’esempio.
Come potete notare, il “form” restituirà un array “txt[]” contenente i valori dei campi; tale array sarà possibile processarlo, per esempio, richiamando da “form” un file php.

La funzione removeFormField() oltre a rimuovere il campo desiderato riordina i rimanenti campi.

Continua con…questo articolo