jQuery, PHP

Duplicare campi di un modulo con jQuery

multi-recapiti.jpg

Avendo bisogno di implementare una rubrica in un progetto ho avuto l’esigenza di memorizzare per ciascun contatto un numero non precisato di recapiti.

Per la duplicazione del campo recapito ho utilizzato il plugin jquery relCopy che copia un qualsiasi elemento, e suoi figli, dal DOM. Questo in realtà è uno strumento relativamente semplice che chiunque sarà in grado di utilizzare. Se avete lavorato con altri tipi di plugin di jQuery, allora non dovrebbe essere troppo difficile per voi. Utilizzare questo tipo di plugin risolve il problema, come nel mio caso, di provvedere manualmente a realizzare il codice per duplicare una certa porzione della nostra pagina.
Opzioni del plugin sono:

  • excludeSelector (string): selettore jQuery utilizzato per escludere un elemento ed i suoi figli.
  • limit (integer): numero di copie permesse [Default 0: illimitato].
  • append (string): HTML da allegare alla fine di ogni copia.
  • copyClass (string): una classe da associare a ciascuna copia [Default ‘copy’].
  • clearInputs (boolean): opzione per cancellare i valori dei campi input e textarea clonati [Default true].

Per utilizzarlo basta chiamare $('selettore').relCopy({opzioni}) su un qualsiasi elemento del DOM con un selettore di tipo jQuery definito nell’attributo rel dell’elemento.

Documento HTML

Il modulo visualizzato contiene i campi descrittivi del contatto più la possibilità di associarvi quanti recapiti vogliamo:

Dopo i campi predefiniti per descrivere un contatto abbiamo un paragrafo con un campo di tipo testo. Il paragrafo ha la classe clone la stessa utilizzata nell’attributo rel del link posto sotto, il quale ha la funzione di clonarlo.

 

Abbiamo indicato recapiti[] nell’attributo name del campo del recapito in modo da ottenere un array di tutti i recapiti inseriti nell’array globale $_POST: non mettendo le parentesi quadrate il modulo invierebbe il valore dell’ultimo recapito aggiunto.

Script jQuery

Per prima cosa bisogna includere la libreria jQuery (dai server di Google) poi il plugin relCopy ed infine il nostro file di script:

Ecco il codice del nostro file di script:

Tramite la chiamata $('a.add').relCopy({ append: removeLink}); associamo al collegamento la funzione di clonare il recapito. Nell’opzione append utilizzata del plugin abbiamo definito un link che tramite un metodo jQuery permette di eliminare il corrispondente elemento clonato.

 

Salva contatto in PHP

Il codice che segue scandisce l’array $_POST['recapiti'] per estrarre i singoli valori inseriti:

Demo Download

 

You might also like

  • domenico

    come posso rilevare
    i dati inseriti tramite asp?

    27 aprile 2010

LEAVE A REPLY