Question

I have several radio inut fields, that have specific values, that, when selected, I’d like to show an input field, so my code is:

        <label for="adult">Adult</label>
        <input type="radio" name="type" value="45" />
        <label>Number</label><input type="text" id="dob"  />

        <label for="adult">Student</label>
        <input type="radio" name="type" value="5" />
        <label>D.O.B</label><input type="text" id="dob"  />

        <label for="adult">Child</label>
        <input type="radio" name="type" value="5" />
        <label>D.O.B</label><input type="text" id="dob"  />

You can see both the Student and the Child button have a D.O.B field. I need this to be hidden and only display if the selected radio is chosen.

My biggest problem, is that both have the same value (this is based on a price, which are the same).

How would I target each specific radio to show the D.O.B field? Could I add a class/id to each and target them that way?

Thanks

Answer 1

First: IDs should be unique (multiple id="dob" are bad)

To answer your question: Give each input to show/hide a class (here: dob) and each radio button, which has a dob-field another one (here: show_dob). Then you can do:

<script type="text/js">
$( function() {

    $('input.dob').hide(); // hide all first
    $('input[type="radio"]').click( function() {
        $('input.dob').hide(); // hide all on click
        if( $(this).hasClass('show_dob') ) { // only if the radio button has a dob-field
            $(this).nextAll('input.dob:first').show(); // show only the following first
        }
    });

});
</script>

    <label for="adult">Adult</label>
    <input type="radio" name="type" value="45" />
    <label>Number</label><input type="text" />

    <label for="adult">Student</label>
    <input class="show_dob" type="radio" name="type" value="5" />
    <label>D.O.B</label><input class="dob" type="text" />

    <label for="adult">Child</label>
    <input class="show_dob" type="radio" name="type" value="5" />
    <label>D.O.B</label><input class="dob" type="text" />