I have a relatively simple HTML / JavaScript form. Such as this:

<form method='POST' action='someurl'>
    <label for='field1'>Your name</label>
    <input id='field1' name='field1' type='text' />

    <label for='field2'>Status</label>
    <select id='field2' name='field2'>
        <option>-select one-</option>
        <option value='Employee'>Employee</option>
        <option value='Retiree'>Retiree</option>
    </select>

    <label for='field3'>City you work in</label>
    <input id='field3' name='field3' type='text' />
</form>

What I need to be able to do, is change the text inside of the label for field3 based on the selected value in field2. So when field2 has 'Employee' selected the field3 label says 'City you work in', but when field2 has 'Retiree' selected then field3's label should be 'City where you live'.

One solution I have done is to have multiple tags inside of the field3 label, and then using some JavaScript I can toggle which of the tags inside the label is being displayed, like this:

// Form as above
<label for='field3'>
    <span id='field3EmployeeLabel' style='display:none;'>City you work in</span>
    <span id='field3RetireeLabel' style='display:none;'>City where you live</span>
</label>
<input id='field3' name='field3' type='text' />

function updateLabel() {
    if($('#field2').val()=='Employee') {
        $('#field3RetireeLabel').hide();
        $('#field3EmployeeLabel').show();
    } 
    else if($('#field2').val()=='Retiree') {
        $('#field3EmployeeLabel').hide();
        $('#field3RetireeLabel').show();
    }
    else {
        $('#field3RetireeLabel').hide();
        $('#field3EmployeeLabel').show();       
    }
}

The main reason that I don't like this is that it all has to be coded by hand, and this is just a simple example, what if there are 7 or 8 different options in field2? Also, what if I had to bine multiple form field values to figure out which label to display?

Is there a design pattern or best-practice for this sort of thing in HTML? How have others handled this sort of requirement on their forms?

I have a relatively simple HTML / JavaScript form. Such as this:

<form method='POST' action='someurl'>
    <label for='field1'>Your name</label>
    <input id='field1' name='field1' type='text' />

    <label for='field2'>Status</label>
    <select id='field2' name='field2'>
        <option>-select one-</option>
        <option value='Employee'>Employee</option>
        <option value='Retiree'>Retiree</option>
    </select>

    <label for='field3'>City you work in</label>
    <input id='field3' name='field3' type='text' />
</form>

What I need to be able to do, is change the text inside of the label for field3 based on the selected value in field2. So when field2 has 'Employee' selected the field3 label says 'City you work in', but when field2 has 'Retiree' selected then field3's label should be 'City where you live'.

One solution I have done is to have multiple tags inside of the field3 label, and then using some JavaScript I can toggle which of the tags inside the label is being displayed, like this:

// Form as above
<label for='field3'>
    <span id='field3EmployeeLabel' style='display:none;'>City you work in</span>
    <span id='field3RetireeLabel' style='display:none;'>City where you live</span>
</label>
<input id='field3' name='field3' type='text' />

function updateLabel() {
    if($('#field2').val()=='Employee') {
        $('#field3RetireeLabel').hide();
        $('#field3EmployeeLabel').show();
    } 
    else if($('#field2').val()=='Retiree') {
        $('#field3EmployeeLabel').hide();
        $('#field3RetireeLabel').show();
    }
    else {
        $('#field3RetireeLabel').hide();
        $('#field3EmployeeLabel').show();       
    }
}

The main reason that I don't like this is that it all has to be coded by hand, and this is just a simple example, what if there are 7 or 8 different options in field2? Also, what if I had to bine multiple form field values to figure out which label to display?

Is there a design pattern or best-practice for this sort of thing in HTML? How have others handled this sort of requirement on their forms?

• javascript
• html
• forms

4 Answers 4

Create a map of values to labels to display http://jsfiddle/mendesjuan/VBVtE/3/ When you add new options, just add them to the labels map.

JS

$('#field2').change(function() {
    var labels = {
        'Employee' : 'City you work in',
        'Retiree' : 'City you live in',
        '-select one-': 'Default value'
    }      
    $("label[for='field3']").html(labels[$(this).val()]);
});

I would probably solve it a bit like this (in an isolated scope, of course):

var labelEl = $( "label[ for='field3' ]" ),
    labels  = { Employee : "City in which you work",
                Retiree  : "City where you live"
              }
;

$('#field2').change( function() {
  // choose the correct label (default to the Employee label)
  var newLabel = labels[ $(this).val() ] || labels.Employee;

  labelEl.text( newLabel ); // change the label text
} );

The function could obviously be reduced to a one-liner, avoiding the creation of newLabel, but I've left it as-is for readability.

Well, what I would suggest is the following:

<label id="label3" for="field3">
  <span id="label3_Employee">City you work in</span>
  <span id="label3_Retiree">City you live in</span>
</label>
<script type="text/javascript">
  function updateLabel() {
    $('label#label3 span').hide();
    $('label#label3 span#label3_' + $('#field2').val()).show();
  }
</script>

How about a bination of @Juan and @Jordan's answers: (both of which are great, thanks!)

$('#field2').change(function() {
    var labels = {
        'Employee' : 'City you work in',
        'Retiree' : 'City you live in',
        'default': 'Default value'
    }      
    $("label[for='field3']").html(labels[$(this).val()] || labels['default']);
});

This allows for the field to have a default value without having to specifically designate each possible option in the labels list, all I need to specify are the cases that differ from the default.