Estoy intentando crear un formulario que oculte varios cuadros de entrada del formulario a menos que se cumpla una condición.
Entonces, la pregunta sería: ¿Tiene una dirección postal separada? sí No
Si se selecciona "sí", quiero mostrar tres campos de entrada para su dirección postal, ciudad y código postal. Si es "no", entonces no quiero que aparezca nada. Me gustaría que fueran capaces de pasar a la siguiente línea.
Lo que se me ocurrió hasta ahora de la investigación solo funciona si hago un cuadro de entrada simple para una respuesta. Cuando intento hacer múltiples entradas dentro de sus propios divs, se rompe el formulario.
<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"; } }Gracias.
Tengo muchos comentarios aquí que espero puedan ayudarte:
<fieldset> en un formulario para manejar un grupo de campos de formulario. Si tiene el atributo disabled , todos los campos del formulario secundario estarán deshabilitados.<input> puede tener cualquier valor, pero trate de apegarse a los estándares: autocompletar #valores .name en los formularios y use menos ID: los ID deben ser únicos en el documento HTML.required y el estilo de acuerdo con eso. JavaScript escucha un evento de cambio en todo el formulario (por lo tanto, esto podría ser cualquier cambio en cualquier campo de formulario). Pruebo si e.target.name es "sí o no", entonces sé que los botones de opción cambiaron. Ahora puedo tomar el valor booleano de "radioNodeList" y asignarlo a la propiedad disabled del conjunto de campos.
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>