Hide DIVs for forms with jQuery

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!!!

• 1Taken from this article: jQuery Select Example
• 2Taken from this question on stackoverflow