I am attempting to build a form that hides multiple input boxes of the form unless a condition is met.
So the question would be: Do you have a separate mailing address? Yes No

If "yes" is selected, I want to then show three input fields for their mailing address, city, and zip. If "no," then I don't want anything to show up. I'd just like them to be able to go to the next line.

What I've come up with so far from research only works if I do a simple single input box for a response. When I attempt to do multiple inputs within their own divs, it breaks the form.

 <div >
                    <label>
                    <input type="radio" id="yes" name="yesOrNo" value="yes" onchange="displayQuestion(this.value)" />Yes</label>
                    <label>
                    <input type="radio" id="no" name="yesOrNo" value="no" onchange="displayQuestion(this.value)" />No</label>
            
                    <div id="yesQuestion" style="display:none;"><br/>
                        <div >
                            <label for="Mailing Address" >Mailing Address</label>
                            <input id="Mailing_Address" name="Mailing Address" type="text"  autocomplete="mailing-address"/>
                        </div>
                        <div >
                            <label for="Mailing_City" >City</label>
                            <input id="mailing_city" name="mailing_city" type="text"  autocomplete="street-city"/>
                        </div>
                        <div >
                            <label for="mailing_zip" >Zip Code</label>
                            <input id="mailing_zip" name="mailing_Zip" type="text"  autocomplete="street-zip"/>
                        </div>
                    </div>
                </div>

    function displayQuestion(answer) {

        document.getElementById('noQuestion').style.display = "none";

        if (answer == "yes") {    

        document.getElementById(answer   'Question').style.display = "block";

        } else if (answer == "no") {  document.getElementById('yesQuestion').style.display = "none";

}

}

Thank you.

CodePudding user response：

I have a lot of comments here that hopefully can help you:

1. A <fieldset> can be used in a form for handling a group of form fields. If it has the disabled attribute all child form fields will be disabled.
2. In your case the radio buttons can have the values 0 and 1. These values can be turned into a boolean.
3. The attribute in <input> can have any value, but try to stick to the standards: autocomplete #values.
4. Try to make use of the name attribute in forms and use less IDs -- IDs need to be unique in the HTML document.
5. Instead of using a class name like "required-text" in your case for styling required fields, use the required attribute and style according to that.

The JavaScript listens for a change event on the entire form (so, this could be any change on any form field). I test if the e.target.name is "yesOrNo" -- then I know that the radio buttons changed. Now I can take the boolean value from the "radioNodeList" and assign that to the disabled property of the fieldset.

document.addEventListener('DOMContentLoaded', e => {
  document.forms.form01.addEventListener('change', e => {
    if (e.target.name == 'yesOrNo') {
      let yesOrNo = new Boolean(parseInt(e.target.form.yesOrNo.value));
      e.target.form.yesQuestion.disabled = yesOrNo.valueOf();
    }
  });
});

input:required {
  border: red thin solid;
}

input:disabled {
  border: darkgray thin solid;
  background-color: lightgray;
}

fieldset:disabled {
  display: none;
}

<form name="form01">
  <div >
    <label><input type="radio" name="yesOrNo" value="0"/>Yes</label>
    <label><input type="radio" name="yesOrNo" value="1" checked/>No</label>
  </div>
  <fieldset name="yesQuestion" disabled>
    <div >
      <label for="mailing_address" >Mailing Address</label>
      <input id="mailing_address" name="mailing_address" type="text"
        autocomplete="street-address" required/>
    </div>
    <div >
      <label for="mailing_city" >City</label>
      <input id="mailing_city" name="mailing_city" type="text"
        autocomplete="address-level2" required/>
    </div>
    <div >
      <label for="mailing_zip" >Zip Code</label>
      <input id="mailing_zip" name="mailing_zip" type="text"
        autocomplete="postal-code" required/>
    </div>
  </fieldset>
</form>