## JavaScript and Ice Cream

### Exposing Additional Form Elements

Additional relevant form elements are exposed based upon user input. Here, this is achieved by having the entire form in the markup, with a certain section hidden via CSS (`display: none;`). If "Yes" is chosen, the display property is changed to "block" through JS.

Example 7.1 - Exposing Additional Form Elements - Example 7.1
<form method="post" name="ice_cream" id="ice_cream" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><fieldset><legend>Would you like ice cream?</legend><label><input type="radio" name="want" id="ic_yes" value="yes"/>Yes</label><label><input type="radio" name="want" id="ic_no" value="no"/>No</label></fieldset><fieldset id="icecream_options"><legend>Ice Cream Options</legend><fieldset><legend>Would you like a cup or a cone?</legend><label><input type="radio" id="container_cup" name="container" value="cup"/>Cup</label><label><input type="radio" id="container_cone" name="container" value="cone"/>Cone</label></fieldset><fieldset><legend>What topping do you want?</legend><label><input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/>Whipped cream</label><label><input type="checkbox" name="toppings" id="toppings_jimmies" value="jimmies"/>Jimmies</label><label><input type="checkbox" name="toppings" id="toppings_sprinkles" value="sprinkles"/>Sprinkles</label><label><input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/>Nuts</label><label><input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/>Cherry</label></fieldset></fieldset><button type="submit">Submit Order</button></form>label { display: block; } input[type=submit], button[type=submit] { display: block; } form fieldset { margin-bottom: 1rem; } #icecream_options { border-style: none; } button.clicked { border: 3px solid purple; } ul.resourcelist { border: 2px solid black; border-radius: 5px; } .hidden { display: none; } body { font-family: helvetica, sans-serif; margin: 1rem; line-height: 1.5; } document.addEventListener('DOMContentLoaded',function(){ console.log("dom is loaded!"); let iceCreamOptions = document.querySelector('#icecream_options'); iceCreamOptions.classList.add("hidden"); let wantRadioInputs = document.querySelectorAll("form input[name=want]"); wantRadioInputs.forEach(function(el){ console.log(el); el.addEventListener("click",function(){ console.log("radio button was just clicked!"); let yesRadio = document.querySelector('#ic_yes'); if (yesRadio.checked == true) { console.log("Yes is checked!"); iceCreamOptions.classList.remove("hidden"); } else { console.log("Yes is NOT checked"); iceCreamOptions.classList.add("hidden"); } }) }); });

- Markup
- Style
- Script
- Display
- Screenshot

     <form method="post" name="ice_cream" id="ice_cream" action="https://cs12.net/form/submit.php">
       <fieldset>
         <legend>Would you like ice cream?     </legend>
         <label>
           <input type="radio" name="want" id="ic_yes" value="yes"/>
    Yes     </label>
         <label>
           <input type="radio" name="want" id="ic_no" value="no"/>
    No     </label>   </fieldset>
       <fieldset id="icecream_options">
         <legend>Ice Cream Options     </legend>
         <fieldset>
           <legend>Would you like a cup or a cone?       </legend>
           <label>
             <input type="radio" id="container_cup" name="container" value="cup"/>
    Cup       </label>
           <label>
             <input type="radio" id="container_cone" name="container" value="cone"/>
    Cone       </label>     </fieldset>
         <fieldset>
           <legend>What topping do you want?       </legend>
           <label>
             <input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/>
    Whipped cream       </label>
           <label>
             <input type="checkbox" name="toppings" id="toppings_jimmies" value="jimmies"/>
    Jimmies       </label>
           <label>
             <input type="checkbox" name="toppings" id="toppings_sprinkles" value="sprinkles"/>
    Sprinkles       </label>
           <label>
             <input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/>
    Nuts       </label>
           <label>
             <input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/>
    Cherry       </label>     </fieldset>   </fieldset>
       <button type="submit">Submit Order   </button>
     </form>

In `style` element (`<style>`) within `head` element:

    label {
      display: block;
    }

    input[type=submit],
    button[type=submit] {
      display: block;
    }
    form fieldset {
      margin-bottom: 1rem;
    }
    #icecream_options {
      border-style: none;
    }
    button.clicked {
      border: 3px solid purple;
    }
    ul.resourcelist {
      border: 2px solid black;
      border-radius: 5px;
    }
    .hidden {
      display: none;
    }
    body {
      font-family: helvetica, sans-serif;
      margin: 1rem;
      line-height: 1.5;
    }

In `script` element within `head` element (`<script>`):

    document.addEventListener('DOMContentLoaded',function(){
        console.log("dom is loaded!");
        let iceCreamOptions = document.querySelector('#icecream_options');

        iceCreamOptions.classList.add("hidden");
        let wantRadioInputs = document.querySelectorAll("form input[name=want]");

        wantRadioInputs.forEach(function(el){
            console.log(el);
            el.addEventListener("click",function(){
                console.log("radio button was just clicked!");
                let yesRadio = document.querySelector('#ic_yes');
                if (yesRadio.checked == true) {
                    console.log("Yes is checked!");
                    iceCreamOptions.classList.remove("hidden");
                } else {
                    console.log("Yes is NOT checked");
                    iceCreamOptions.classList.add("hidden");
                }
            })
        });

    });