tags:

views:

74

answers:

1

I need to hide an 'Other' label and corresponding input field as default. Then when a user selects 'Other' from a HTML select drop down the matching label and text input need to show. If they navigate to a different option then the label and text input are hidden again:

HTML:

    <select id="indTitle" class="inlineSpace">
        <option value="Please select">Please select...</option>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Ms">Ms</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option>
        <option value="Other">Other</option>
    </select>
    <label for="indOther" class="inlineSpace">Other</label>
    <input type="text" class="text" name="indOther" id="indOther" maxlength="20" />
+3  A: 
$('#indTitle').change(function() {
    if($(this).val() == 'Other') {
        $('label[for=indOther], #indOther').show();
    } else {
        $('label[for=indOther], #indOther').hide();
    }
});
David Hedlund
Hi. Cheers for that. I had to set the default to hide as well by adding:$('label[for=indOther], #indOther').hide();before the change event
RyanP13
ah, yes. if it's hidden by default, though (which makes sense), i'd consider hiding it manually by adding `style="display: none;"` inline to the two elements, otherwise they might be visible briefly before the script is executed.
David Hedlund
I would have to accomodate for JavaScript being disabled so if i was to add manually the user would never be able to input the other text if they selected Other as their title.Don't get me wrong i really appreciate the help still :)
RyanP13