jQuery: mostrare e nascondere i campi dei form

Vi sarà sicuramente capitato di dover gestire un form di checkout con jQuery. Tipicamente in questo tipo di form l'utente deve specificare i suoi dati personali e i dati per la spedizione. Se i dati personali coincidono con quelli di spedizione, viene fornito un checkbox per poter selezionare solo i campi necessari. Il checkbox si rende necessario per poter fornire allo script lato server di elaborazione dei dati un riferimento sul tipo di scelta operata (tramite i parametri POST). In questo esempio vedremo come associare due azioni al click operato sul checkbox: se l'utente lo seleziona, i campi per la spedizione scompariranno e, viceversa, se lo deseleziona tali campi riappariranno.

Abbiamo questo form:

<form action="#" method="post" id="delivery">
	
	<fieldset>
		<legend>Dati personali</legend>
		<div>
			<label for="nome">Nome</label>
			<input type="text" name="nome" id="nome" />
		</div>
		<div>
			<label for="cognome">Cognome</label>
			<input type="text" name="cognome" id="cognome" />
		</div>
		<div>
			<label for="indirizzo">Indirizzo</label>
			<input type="text" name="indirizzo" id="indirizzo" />
		</div>
		<div>
			<label for="citta">Citt&agrave;</label>
			<input type="text" name="citta" id="citta" />
		</div>
		<div>
			<label for="cap">CAP</label>
			<input type="text" name="cap" id="cap" />
		</div>
	</fieldset>
	
	<p><label for="same-data"><input type="checkbox" name="same" id="same" />Stessi dati per la spedizione</label></p>
	
	<fieldset>
	
		<legend>Dati di spedizione</legend>
		
		<div>
			<label for="indirizzo-sped">Indirizzo</label>
			<input type="text" name="indirizzo-sped" id="indirizzo-sped" />
		</div>
		<div>
			<label for="citta-sped">Citt&agrave;</label>
			<input type="text" name="citta-sped" id="citta-sped" />
		</div>
		<div>
			<label for="cap-sped">CAP</label>
			<input type="text" name="cap-sped" id="cap-sped" />
		</div>

	
	</fieldset>
	
	<p><input type="submit" name="send" id="send" value="Invia" /></p>

</form>

Il checkbox ha l'ID same. Dobbiamo solo verificare che i campi di spedizione siano visibili o meno. Dato che questi campi sono all'interno di un elemento fieldset (scelta non casuale), opereremo su quell'elemento:

$(function() {

	$('#same', '#delivery').click(function() {
	    
	    var $input = $(this);
		var $fieldset = $input.parents('p').next('fieldset');
		
		if($fieldset.is(':visible')) {
		
			$fieldset.slideUp(500);
		
		} else {
		
			$fieldset.slideDown(500);
		
		}
	
	});

});

Quindi se il checkbox viene selezionato, i campi spariranno. Viceversa, se viene deselezionato i campi riappariranno. Infatti dobbiamo sempre permettere all'utente di poter rivedere le sue scelte.

Potete visionare l'esempio finale in questa pagina.