Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Niomi Consten
Niomi Consten
1,587 Points

How to show/hide fieldset based on radio button click?

Hee!

I'm hoping someone can help me out. I've been stuck on this for a few hours now. I made a form with html/css. Now I want it to show one of the two fieldsets based on choice (two radio buttons).

I've tried a thousand things but I'm totally stuck. Can someone help me out? This is my code so far:

HTML:

<fieldset> <legend>I want to sign up!:</legend> <label> <input type="radio" name="submit-for" value="project"> <span>Voor een project</span> </label> <label> <input type="radio" name="submit-for" value="stage"> <span>Als stagebedrijf</span> </label> </fieldset>

            <fieldset id="project">
                <legend>Project</legend>
                <label>
                    <span>Titel:</span>
                    <input type="text" name="project-title">
                </label>
                <label>
                    <span>Opdrachtomschrijving:</span>
                    <textarea name="project-description"></textarea>
                </label>
                <label>
                    <span>Doelgroepomschrijving:</span>
                    <textarea name="project-target-audience"></textarea>
                </label>
                <label>
                    <span>Doelstelling/intentie van het project:</span>
                    <textarea name="project-goal"></textarea>
                </label>
                <label>
                    <span>Looptijd:</span>
                    <input type="text" name="project-duration">
                </label>
                <label>
                    <span>Deadline:</span>
                    <input type="date" name="project-deadline">
                </label>
                <fieldset>
                    <legend>Geschikt voor</legend>
                    <label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
                    <label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
                    <label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
                    <label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
                    <label><input type="checkbox" name="project-onbekend"> Onbekend</label>
                </fieldset>
                <label>
                    <span>Opmerking:</span>
                    <textarea name="project-comments"></textarea>
                </label>
            </fieldset>

            <fieldset id="stage">
                <legend>Stage</legend>
                <fieldset>
                    <legend>Geschikt voor</legend>
                    <label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
                    <label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
                    <label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
                </fieldset>
                <fieldset>
                    <legend>Hoe lang is de stage</legend>
                    <label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
                    <label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
                </fieldset>
                <label>
                    <span>Begindatum:</span>
                    <input type="date" name="stage-startdate">
                </label>
                <label>
                    <span>Beschrijving stagewerkzaamheden</span>
                    <textarea name="stage-description"></textarea>
                </label>
                <fieldset>
                    <legend>Beschrijving stagebedrijf</legend>
                    <label>
                        <span>Bedrijfsnaam:</span>
                        <input type="text" name="stage-company-name">
                    </label>
                    <label>
                        <span>Adres:</span>
                        <input type="text" name="stage-address">
                    </label>
                    <label>
                        <span>Postcode:</span>
                        <input type="text" name="stage-postal">
                    </label>
                    <label>
                        <span>Plaats:</span>
                        <input type="text" name="stage-place">
                    </label>
                    <label>
                        <span>Sector:</span>
                        <input type="text" name="stage-sector">
                    </label>
                    <label>
                        <span>Core business:</span>
                        <input type="text" name="stage-core-business">
                    </label>
                </fieldset>
                <label>
                    <span>Opmerking:</span>
                    <textarea name="stage-comments"></textarea>
                </label>
            </fieldset>

            <input type="submit" value="Aanmelden">

        </form>

My Javascript:

window.onload;



// Selecting the fieldsets i want to turn off
var project = document.getElementById('#project');
var stage = document.getElementById('#stage');

// hide these fieldsets
project.classList.add('is-invisible');
stage.classList.add('is-invisible');

// select first radio button you can find
document.querySelector('input[type="radio"]').onclick = function( ) {
   project.classList.add('is-visible');
}

// select last radio button you can find
document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
    project.classList.remove('is-visible');
}

What am i doing wrong? Can someone please help me out?

Jacob Mishkin
Jacob Mishkin
23,118 Points

edited for formatting.

2 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

I would first hide one or both styles prior to any clicks of the radio button by using CSS. Then in the click function I would create a conditional statement that would apply which CSS style you want; (hide or show) based on the radio button clicked.

Niomi Consten
Niomi Consten
1,587 Points
Niomi Consten
Niomi Consten
1,587 Points

I feel like my javascript doenst select my id's right. Because everything i try to do with my vars doesnt even work or react.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Silly question, but is your JS working at all. has it been applied in either the head or body or the HTML?

Jacob Mishkin
Jacob Mishkin
23,118 Points

First, do a simple alert to the DOM and see if the JS is working. After that, We'll go through the process.

Depending on your text editor it might not select your Id's correctly because you added the "#" inside the getElementById method. Its redundant, because the method call is looking for an id, it doe not need the #.