jQuery and JavaScript Phrasebook

Showing/Hiding Form Elements

Click here to view code image

$("#tires,#model").hide(); $("#make").on("change", function(){   if($(this).val() == ""){     $("#tires,#model").hide(); }   else{ $("#model").show(); } });

Another great trick when providing flow control for a web form is to dynamically hide and show elements. Less is more; you shouldn’t necessarily show users more elements than they need to fill out.

For example, if the form has elements for both men’s sizes and women’s sizes, don’t show both. Wait for users to select the gender and then display the appropriate size elements.

Form elements can be shown and hidden in jQuery using the .show() and .hide() methods. Alternatively, if you want to make the element invisible but still ...