Clean and accesible Other option (Check box and text box)

Question

When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.

How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:

• How do you make the form accessible? Do you use and how do you use the label tag, for example.
• Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
• Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?

Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)

Answer 1

Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.

I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.

Edit: Might look something like this.

$('input[type="radio"]').click( function() {

    if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
        $(this).after('<textarea name="other"></textarea>');
    } else {
        $('textarea[name="other"]').remove();
    }
}

The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).

On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.

Hope that gets you started.