JQuery to show or hide form fields

JQueryJQuery is a javascript library that has revolutionized the way we can trigger client-side events. Having Javascript interact with HTML has become much easier and also more standard thanks to that framework.

In this post, I’ll tackle displaying form elements thanks to JQuery.

The key to JQuery lies in the <head> of your document. JQuery.js is a javascript file that contains the main functions. I’ve downloaded the minified version (72 Ko) from JQuery.com

<script type=”text/javascript” src=”./js/jquery-1.4.2.min.js”></script>

Display form fields on change select box value :

My first exercise is to let JQuery identify the select box value which is selected to display or hide extra form fields.

So, here’s my HTML form with 3 elements : 2 select boxes (id = type and id = choice) and a textarea (id = text) :

<form>
<select id=”type”><option>choose a type</option><option value=”1″>type 1</option><option value=”2″>type 2</option><option value=”3″>type 3</option></select><br />
<select id=”choice”><option>choice</option><option value=”1″>choice 1</option><option value=”2″>choice 2</option><option value=”3″>choice 3</option></select><br />
<textarea id=”text”></textarea>
</form>

Displaying such a form in a browser will display the 3 elements (2 select boxes and the textarea).

My objective is to show the first select box only (id = type) and to only display the second select box and the textarea if the third item of the first select box is selected.

So, in the <head> of my document, I’ll add a script that starts with the $(document).ready() function. This allows you to load as many functions as necessary as soon as the DOM is loaded and before the loading of the contents of your page. You could store this function inside a separate .js file and the power of JQuery is you won’t have to add anything to your HTML content :

<script language=”javascript”>//<![CDATA[

$(document).ready(function() {

$("#choice").hide();

$("#text").hide();

$("#type").change(function() {

if ( $("#type").val() == "3"){

$("#choice").show();

$("#text").show();

}

else{

$("#choice").hide();

$("#text").hide();

}

});

if ( $("#type").val() == "3"){

$("#choice").show();

$("#text").show();

}

$("#choice").change(function() {

var val = $("#choice").val();

$("#text").append(val + "\n");

});

});

//]]></script>

So you’ll easily guess what that script does : the “choice” select box and the textarea are set to hidden by default. JQuery here accesses the form element thanks to their id (#choice, for example). If the value of the “type” select box is set to 3, the other form elements are shown, if not, they’re hidden. Then if the value of the “choice” select box is changed, its value will be added to the textarea content.

 

Display form fields on change checkbox :

My second exercise is to let JQuery identify if a checkbox is ticked to display or hide form fields.

I’ll add a checkbox to my HTML form :

 

<form>
<input type=”checkbox” id=”check” />
<select id=”type”><option>choose a type</option><option value=”1″>type 1</option><option value=”2″>type 2</option><option value=”3″>type 3</option></select><br />
<select id=”choice”><option>choice</option><option value=”1″>choice 1</option><option value=”2″>choice 2</option><option value=”3″>choice 3</option></select><br />
<textarea id=”text”></textarea>
</form>

Next I’ll modify the script in my <head> tag to handle checkbox ticking (or not) :

<script language=”javascript”>//<![CDATA[

$(document).ready(function() {

$("#choice").hide();

$("#text").hide();

$("#type").change(function() {

if ( $("#type").val() == "3"){

$("#choice").show();

$("#text").show();

}

else{

$("#choice").hide();

$("#text").hide();

}

});

if ( $("#type").val() == "3"){

$("#choice").show();

$("#text").show();

}

$("#check").change(function() {

if($("#check").attr("checked")) {

$("#choice").show();

$("#text").show();

}

else{

$("#choice").hide();

$("#text").hide();

}

});

$("#choice").change(function() {

var val = $("#choice").val();

$("#text").append(val + "\n");

});

});

//]]></script>

With JQuery, you’ll also have some “scriptaculous” effects with show and hide actions :

$(“#choice”).show(“slow”);

will slowly display your form element.

You could also use a numeric value :

$(“#choice”).hide(200);

Webliography :

JQuery.com

One thought on “JQuery to show or hide form fields

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>