Hide DIVs for forms with jQuery

Submitted by Nicola Rainiero on 2012-12-12

Writing my first web application to design a storm sewer system, I'm studying a solution to load the proper form according to user selection. I will show you a provisional code to solve this demand. Now the style (texts, colours and graphics) of the web-app is ugly, I will write it last.

In the previous article I introduced two XML files, in order to change the default language and unit of measurement of  an AJAX application. However that choice imposed me new methods to insert or remove content in Javascript. I learned that it was more simple to hide and to show HTML code, so the changing of language or unit is always assured.

DIVs properly shown

In the first load of the app, the design method (rational, reservoir or others) is not show on the screen, but it only appears after the selection of the user. To doing this, I write the following CSS code:

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

Here is the select1:

	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();
}
}

For example, DIV that characterizes the rational method is the following:

<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 and Blur

Another aspect that I have put is to have a default value in a text input and when you "onfocus" the textbox, it makes the text black (default a light gray), and deletes the default value. In HTML:

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

While 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'});
}
});
});

If you want to see the demo click here, while I put all files here: storm_sewer_form.zip. As usual I accept with pleasure any help, hint, correction, and so on!!!




Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.