Corsi on-line

Duplicare i campi di un form con jQuery

Ho trovato un interessante articolo dedicato a come duplicare i campi presenti in un form quando necessitiamo di qualche input addizionale; lo script è stato implementato utilizzando la libreria relCopy.js, un plugin di jQuery concepito appositamente per la duplicazione. Nell’esempio seguente abbiamo un campo di testo denominato “hobby[]” che potrà essere riprodotto tutte le volte che si vuole o cancellato nel caso non risulti più necessario (ecco la demo on line).

La costruzione del form è assai semplice, basta ricordarsi che al nome del campo di input da duplicare deve sempre essere associato un array privo di indice dichiarato, non possiamo infatti sapere a priori quanti possano essere i campi duplicati che ci servono; nel codice Javascript deve invece essere specificata la chiamata alla libreria “relCopy.js” così come deve essere definita la funzione per la rimozione dei campi non desiderati:

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="reCopy.js"></script>
<script type="text/javascript">
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';

$('a.add').relCopy({ append: removeLink});
});
</script>
//HTML code
<form method="post" action="clonesubmit.php">
<p class="clone"> <input type="text" name="hobby[]" class='input'/></p>
<p><a href="#" class="add" rel=".clone">Add More</a></p>
<input type="submit" value=" Submit " />
</form>

Il codice PHP da utilizzare è un normale script per l’elaborazione degli input provenienti da form, naturalmente, dato che il parametro raccolto è un array, non dovrà essere dimenticato l’apposito ciclo per estrarne i diversi valori:

<?php
if($_POST['hobby'])
{
$array=$_POST['hobby'];
foreach($array as $hobby)
{

if(strlen($hobby)>0)
{
// query per l'inserimento dei dati
}

}
}
?>

Se la nostra tabella prevede campi che accettano anche valori vuoti, sarà possibile eliminare il controllo effettuato con strlen(), ma non dimenticate di completare lo script con un’efficace sistema per la validazione degli input!

Post correlati
I più letti del mese
Tematiche