Select options: jQuery, Case and show/hide form fi

Question

What is the most efficient way of showing/hiding form fields based on the value of a select control? I have one select control and three input fields, which show/hide based upon what type of business you work for.

<select id="business-type">
  <option value="1">Sole Trader</option>
  <option value="2">Partnership</option>
  <option value="3">Public Sector</option>
  <option value="4">Public Limited Company (Plc)</option>
  <option value="5">Charity</option>
</select>

// This should appear if you are a Sole Trader (option 1 in the select box)
<div id="soletrader">
<label for="tax">VAT Number</label>
<input type="text" name="tax" id="tax" /> 
</div>

// This should appear if you are a Public Sector business (option 3 in the select box)
<div id="publicsector">
<label for="urn">URN Number</label>
<input type="text" name="urn" id="urn" />   
</div>

// This should appear if you are a Charity (option 5 in the select box)
<div id="charity">
<label for="charityref">Charity Reference No.</label>
<input type="text" name="charity" id="charityref" />    
</div>

Would a case statement - written in jquery - be the most appropriate approach to this matter? How would I write such a statement?

The three input fields need to be hidden by default. Any assistance would be greatly appreciated. I am dismal at javascript/jquery.

Answer 1

Put these functions in your $.ready(function(){});

$('#soletrader').hide();
$('#publicsector').hide();
$('#charity').hide();

$('#business-type').change(function(){
   var value = $(this).val();
   if(value == '1'){
     $('#soletrader').show();
     $('#publicsector').hide();
     $('#charity').hide();
   } else if(value == '3'){
     $('#soletrader').hide();
     $('#publicsector').show();
     $('#charity').hide();
   } else if(value == '5'){
     $('#soletrader').hide();
     $('#publicsector').hide();
     $('#charity').show();
   } else {
     $('#soletrader').hide();
     $('#publicsector').hide();
     $('#charity').hide();
   }
});

Answer 2

Few things:

1) I would add a class (I used .additional-field below) to each of the additional fields. This will allow you to hide them all in one swoop instead of requiring you to $.hide() each one explicitly. It's not so bad with just three, but if you ended up with much more, it'd get hairy quick.

2) I put the code in a function and both call that function on page load and use it as the parameter to .change(). This saves repeating the same code, and covers the case of an initial value from either editing an existing one or an error in the form that needs to be corrected. Otherwise, the additional field wouldn't show until you chose something else and then chose the item again.

$(document).ready(function(){

    function toggleBusinessTypeAdditionalFields() {
        $('.additional-field').hide();

        var selected = $('#business-type').val();
        switch (selected) {
            case 1:
                $('#soletrader').show();
                break;
            case 3:
                $('#publicsector').show();
                break;
            case 5:
                $('#charity').show();
                break;
        }
    }
    toggleBusinessTypeAdditionalFields();
    $('#business-type').change(toggleBusinessTypeAdditionalFields);

});

Answer 3

First, you should add "class='field'" to each field div.

Then, with this code, you will show/hide the appropriate field upon selction in the dropdown:

$('#business-type').change(function(){
    var selection = $('#business-type').val();
    $('.field').hide();
    switch(selection){
        case 0:
            $('#soletrader').show();
            break;
        case 1:
            $('#publicsector').show();
            break;
        case 2:
            $('#charity').show();
            break;
    }
});

Answer 4

I don't think an if/switch statement is necessary. Help your JavaScript out a bit with a little more HTML markup. If you put an attribute named "data-val" on each of the divs, and assign it the value of the option you want it to appear along with, then the JS becomes very simple.

So your HTML would look something like this for the divs:

<div id="soletrader" data-val="1">
    <label for="tax">VAT Number</label>
    <input type="text" name="tax" id="tax" /> 
</div>

And then your JS would be:

 $('select').change(function(){
     var val = $(this).val();
     $('div').hide().filter('[data-val=' + val + ']').show();
 });