javascript, 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:

<p class="clone"><input type="text" name="recapiti[]" class='input'/></p>
<p><a href="#" class="add" rel=".clone">Aggiungi recapito</a></p>
<p><input type="submit" value="Salva" /></p>

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:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="relCopy.jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

Ecco il codice del nostro file di script:

$(document).ready(function(){
  // link inserito alla fine dell'elemento clonato che permette di eliminarlo
  var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';

  // chiamata permette di clonare il paragrafo con all'interno il campo di testo del recapito
  $('a.add').relCopy({ append: removeLink });
});

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:

<?php
if($_POST['recapiti']){
  $array_recapiti = $_POST['recapiti'];
  foreach ($array_recapiti as $recapito) {
    if (strlen($recapito)>0) {
      //operazioni sul singolo recapito
      echo $recapito."<br />";
    }
  }
}
?>

Demo Download

 

Potrebbero Interessarti

  • Ricerca in modo interattiva con jQuery3 Febbraio 2010 Ricerca in modo interattiva con jQuery Tra i tantissimi plugin sviluppati per jQuery da me utilizzati, QuickSearch è quello che ho scoperto di recente, ma rapidamente aggiunto nella mia lista di preferiti. QuickSearch agisce visualizzando un campo di ricerca posto sopra o sotto determinati elementi - tabelle, elenchi e […]
  • NyroModal: finestre modali con jQuery8 Luglio 2010 NyroModal: finestre modali con jQuery Se state cercando uno script lightbox che è in grado di gestire gli iFrame, contenuti provenienti dal server tramite chiamate Ajax, contenuti HTML in linea, immagini, video e altro ancora, NyroModal è un ottimo plugin jQuery che permette tutto ciò. Negli ultimi […]
  • Crea tooltip su link e immagini in modo semplice con jQuery16 Dicembre 2009 Crea tooltip su link e immagini in modo semplice con jQuery Sticky Tooltip è un plugin jQuery che permette di aggiungere un tooltip, azione di passaggio del mouse sopra l'elemento, contenente ulteriore codice HTML. In generale il tooltip segue il cursore che si muove sull'area occupata dall'elemento, una caratteristica importante di […]
  • Creare un menu a lista in ordine alfabetico con jQuery8 Febbraio 2010 Creare un menu a lista in ordine alfabetico con jQuery ListMenu è un plugin jQuery che permette di convertire facilmente una lunga lista di elementi, difficile da navigare, in un sistema compatto di menu a liste visualizzate in ordine alfabetico, in modo che si presenti graficamente più pulita e di rapido accesso agli […]

Potrebbero interessarti

  • domenico

    come posso rilevare
    i dati inseriti tramite asp?

    27 Aprile 2010

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.