条件表单输入 - 多个字段 Shown/Hidden

Question

我正在尝试构建一个隐藏表单的多个输入框的表单，除非满足条件。
所以问题是：你有单独的邮寄地址吗？是的否

如果选择“是”，我想显示他们的邮寄地址、城市和邮政编码的三个输入字段。如果“否”，那么我不想显示任何内容。我只是希望他们能够转到下一行。

到目前为止，我从研究中得出的结论只有在我做一个简单的单一输入框作为响应时才有效。当我尝试在它们自己的 div 中进行多个输入时，它会破坏表单。

 <div class="form-item">
                    <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 class="form-item">
                            <label for="Mailing Address" class="req-field">Mailing Address</label>
                            <input id="Mailing_Address" name="Mailing Address" type="text" class="required-text" autocomplete="mailing-address"/>
                        </div>
                        <div class="form-item">
                            <label for="Mailing_City" class="req-field">City</label>
                            <input id="mailing_city" name="mailing_city" type="text" class="required-text" autocomplete="street-city"/>
                        </div>
                        <div class="form-item">
                            <label for="mailing_zip" class="req-field">Zip Code</label>
                            <input id="mailing_zip" name="mailing_Zip" type="text" class="required-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";

}

}

谢谢。

Answer 1

这里有很多意见希望能帮到你：

A <fieldset> 可用于处理一组表单字段的表单中。如果它具有 disabled 属性，所有子表单字段都将被禁用。
在您的情况下，单选按钮可以具有值 0 和 1。这些值可以转换为布尔值。
<input>中的属性可以取任意值，但尽量遵守标准：autocomplete #values.
尽量在表单中使用 name 属性并使用较少的 ID -- ID 在 HTML 文档中需要是唯一的。
不要在您的案例中使用 class 名称来设置必填字段的样式，而是使用 required 属性和相应的样式。

JavaScript 侦听整个表单上的更改事件（因此，这可能是任何表单字段上的任何更改）。我测试 e.target.name 是否为“yesOrNo”——然后我知道单选按钮已更改。现在我可以从“radioNodeList”中获取布尔值并将其分配给字段集的 disabled 属性。

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 class="form-item">
    <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 class="form-item">
      <label for="mailing_address" class="req-field">Mailing Address</label>
      <input id="mailing_address" name="mailing_address" type="text"
        autocomplete="street-address" required/>
    </div>
    <div class="form-item">
      <label for="mailing_city" class="req-field">City</label>
      <input id="mailing_city" name="mailing_city" type="text"
        autocomplete="address-level2" required/>
    </div>
    <div class="form-item">
      <label for="mailing_zip" class="req-field">Zip Code</label>
      <input id="mailing_zip" name="mailing_zip" type="text"
        autocomplete="postal-code" required/>
    </div>
  </fieldset>
</form>

条件表单输入 - 多个字段 Shown/Hidden

Conditional Form Inputs - Multiple Fields Shown/Hidden

javascript

forms

hidden-field

conditional-statements