我正在嘗試構建一個隱藏表單的多個輸入框的表單，除非滿足條件。
所以問題是：你們有單獨的郵寄地址嗎？是 否
如果選擇“是”，我想顯示他們的郵寄地址、城市和郵編的三個輸入欄位。如果“不”，那么我不想出現任何東西。我只是希望他們能夠轉到下一行。
到目前為止，我從研究中得出的結論只有在我為回應做一個簡單的單個輸入框時才有效。當我嘗試在他們自己的 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";
}
}
謝謝你。
uj5u.com熱心網友回復：
我在這里有很多評論，希望可以幫助您：
<fieldset>可以在表單中使用A來處理一組表單域。如果它具有該disabled屬性，則所有子表單欄位都將被禁用。- 在您的情況下，單選按鈕的值可以為 0 和 1。這些值可以轉換為布林值。
- 屬性 in
<input>可以有任何值，但盡量遵守標準：自動完成 #values。 - 盡量
name在表單中使用屬性并使用更少的 ID——ID 在 HTML 檔案中需要是唯一的。 - 在你的情況下，不要使用像“required-text”這樣的類名來設定必需欄位的樣式，而是
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/392863.html
標籤：javascript 形式 条件语句 隐藏域