DIV nascosti per i form con jQuery

Pubblicato da Nicola Rainiero il 09-12-2012 (aggiornato il 11-12-2012)

Continua la sperimentazione con AJAX per la riscrittura del mio software sulle fognature bianche. Descriverò la soluzione provvisoria che intendo adottare e perfezionare per l'inserimento dei dati di input da parte dell'utente, sfruttando anche il codice CSS per nascondere e mostrare nuovi form a seconda delle scelte operate. Lo stile (testo, colori e grafica) è ancora molto scarno e sarà implementato più avanti.

Nel precedente articolo avevo introdotto due file XML per poter permettere all'utente di cambiare al volo lingua e sistema di riferimento di tutti i campi presenti. Questa scelta però mi ha imposto di rivedere le modalità per l'inserimento di form e nuovi contenuti in Javascript. Ho verificato che è molto più semplice nascondere ed attivare porzioni di HTML a seconda delle proprie scelte, in questo modo il cambio della lingua e delle unità di misura è sempre assicurato.

DIV visualizzati opportunamente

Il menu con i form per definire le variabili dei metodi di dimensionamento (razionale, dell'invaso e altri in futuro) non viene visualizzato a video al momento del caricamento della pagina, ma viene mostrato solo dopo la scelta dell'utente. Il foglio di stile sarà quindi così definito:

#box_rational, #box_reservoir, #box_others {
display: none;
}

Poi l'utente con un opportuno select1 potrà visualizzare i campi che definiscono il metodo selezionato e quindi compilarli:

	function onSelectChange(){
var selected = $('#method option:selected');
var output = '';
if ((selected.val() == 0)) {
$("#box_rational").hide();
$("#box_reservoir").hide();
$("#box_others").hide();
method = selected.val();
}
if ((selected.val() == 1)) {
$("#box_rational").show();
$("#box_reservoir").hide();
$("#box_others").hide();
method = selected.val();
}
if ((selected.val() == 2)) {
$("#box_rational").hide();
$("#box_reservoir").show();
$("#box_others").hide();
method = selected.val();
}
if ((selected.val() == 3)) {
$("#box_rational").hide();
$("#box_reservoir").hide();
$("#box_others").show();
method = selected.val();
}
}

A titolo di esempio il DIV che caratterizza il metodo razionale è il seguente:

<div id="box_rational">
<p class="idrological_data">Idrological data</p>
a = <input class="txtClass" name="aRainRat" type="text" id="aRainRat" defaultVal="00.00" size="10" /> mm <span class="hour">hour</span>^n<br />
n = <input class="txtClass" name="nRainRat" type="text" id="nRainRat" defaultVal="00.00" size="10" /> -<br />
<input type="checkbox" name="hourRainRat" id="hourRainRat" value="bar" /> <span class="minor_hour">if the IFD curve ratios are minor of an hour, check this box</span><br />
t0 = <input class="txtClass" name="v0RainRat" type="text" id="v0RainRat" defaultVal="5 / 15" size="10" /> min<br />
<input type="button" name="add" style="width:140px" value="TEST" onclick="readOptionRat()" />
</div>

Focus e Blur

Un altro aspetto che ho voluto inserire fin da subito è la possibilità di mostrare un testo di default all'interno di tutti gli input per suggerire quali valori inserire e/o il range disponibile. In HTML:

a = <input class="txtClass" name="aRainRes" type="text" id="aRainRes" defaultVal="00.00" size="10"  />

Mentre in Javascript2:

$('body').ready(function(){
$('.txtClass').each( function () {
$(this).val($(this).attr('defaultVal'));
$(this).css({color:'grey'});
});

$('.txtClass').focus(function(){
if ( $(this).val() == $(this).attr('defaultVal') ){
$(this).val('');
$(this).css({color:'black'});
}
});
$('.txtClass').blur(function(){
if ( $(this).val() == '' ){
$(this).val($(this).attr('defaultVal'));
$(this).css({color:'grey'});
}
});
});

La classe txtClass abbinata agli input e descritta sopra, fornirà queste utili funzioni.

Se volete vedere come funziona il tutto potete collegarvi qui, mentre i file compressi sono disponibili in storm_sewer_form.zip. Come sempre ogni vostro aiuto, discussione, suggerimento e correzione è bene accetto!!




Potrebbero interessarti anche:

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.