Question

I’ve made a form to process user input using PHP, and the first question asks the user to select one of three radio buttons to fill in the “type” parameter – the available options are “book”, “journal”, and “website”, and the code looks like this:

<strong>Type of work:</strong>
<input type="radio" name="type" id="book" value="book" checked="checked" /> <label for="book">Book</label>
<input type="radio" name="type" id="journal" value="journal" /> <label for="journal">Journal</label>
<input type="radio" name="type" id="website" value="website" /> <label for="website">Website</label>

Further down the page, I have three fieldsets (using <fieldset>), each corresponding to one of the types. I’d like to have only one of these display at a time, depending on which radio button is selected, to make the page look cleaner.

Unfortunately, I’m a total JavaScript noob, and my last attempt broke things really badly. The fieldsets already have IDs (boxBook, boxJournal, and boxWebsite), although they currently don’t do anything special.

If it affects anything, I’d like the output to be valid HTML5, and to degrade gracefully, displaying all three fieldsets if the user has JS disabled.

Any help would be greatly appreciated ^^

Answer 1

Using jQuery I’d suggest:

// hides the elements using jQuery (so they're visible without JavaScript)
$('#boxBook, #boxJournal, #boxWebsite').hide();

// when the radio inputs whose name is equal to "type" is changed:
$('input:radio[name="type"]').change(function() {
    var id = this.id;

    // hides all the fieldset elements whose `id` starts with "box":
    $('fieldset[id^="box"]').hide();

    // looks for the element with the id equal to
    // `box` + upper-cased first-letter of this.id +
    // the substring from second-letter onwards of this.id
    $('#box' + id[0].toUpperCase() + id.substring(1)).show();
});​

JS Fiddle demo.

Incidentally, rather than performing string manipulation on the id of the radio input, it’d be easier to either use a data-* attribute to specify the precise id of the targeted element:

<input type="radio" id="book" name="type" data-targets="boxBook" />

And use:

$('#boxBook, #boxJournal, #boxWebsite').hide();

$('input:radio[name="type"]').change(function() {
    var id = $(this).attr('data-targets'); // or: $(this).data('targets');
    $('fieldset[id^="box"]').hide();
    $('#' + id).show();
});​

JS Fiddle demo.

---

Edited the latter code-block to meet the OP’s requirements:

$('input:radio[name="type"]').change(function() {
    $(this).siblings('input:radio[name="type"]').each(function() {
        $('#' + $(this).data('targets')).hide();
    });
    $('#' + $(this).data('targets')).show();
}).filter(function() {
    return !this.checked;
}).each(function() {
    $('#' + $(this).data('targets')).hide();
});​

JS Fiddle demo.

Though, frankly, I think I’ve over-complicated it quite a bit. But it does work, and meets the needs specified in the comment:

if one of the radio buttons is checked by default, the fieldset doesn’t display. I’d like to have it default to book if possible