Hello. Basically what I’m trying to do is to show other text fields when the option selected from a dropdown is “Yes” (Sí). If the option selected is any other than “Yes” then the other inputs should hide. Can’t get it to work. Can someone help me understand why this is? What am I doing wrong? And ideally explain why, in a simple way?
Thanks all!
The code is this:
<script>
var showAll = document.getElementById("requieres-factura");
showAll.addEventListener("change", muestra);
function muestra() {
if (showAll.value === "Yes") {
document.getElementById('razon-social').disabled = false;
document.getElementById('rfc').disabled = false;
document.getElementById('uso-del-cfdi').disabled = false;
document.getElementById('div_factura').style.display = 'block';
} else {
document.getElementById('razon-social').disabled = true;
document.getElementById('rfc').disabled = true;
document.getElementById('uso-del-cfdi').disabled = true;
document.getElementById('div_factura').style.display = 'none';
}
}
</script>
<p class="cart-attribute__field">
<label>¿Requieres factura?</label><br>
<select required class="required" id="requieres-factura" name="attributes[¿Requieres factura?]">
<option value="Elige una opción"{% if cart.attributes["¿Requieres factura?"] == "Elige una opción" %} selected{% endif %}>Elige una opción</option>
<option value="Yes"{% if cart.attributes["¿Requieres factura?"] == "Sí" %} selected{% endif %}>Sí</option>
<option value="No (No se realizaran facturas posteriores sin excepción)"{% if cart.attributes["¿Requieres factura?"] == "No (No se realizaran facturas posteriores sin excepción)" %} selected{% endif %}>No (No se realizaran facturas posteriores sin excepción)</option>
</select>
</p>
<div id=div_factura style="display: none">
<p class="cart-attribute__field">
<label for="razon-social">Razón Social</label>
<input id="razon-social" type="text" name="attributes[Razón Social]" value="">
</p>
<p class="cart-attribute__field">
<label for="rfc">RFC</label>
<input id="rfc" type="text" name="attributes[RFC]" value="">
</p>
<p class="cart-attribute__field">
<label>Uso del CFDI</label><br>
<select id="uso-del-cfdi" name="attributes[Uso del CFDI]">
<option value="G01 Adquisición de mercancias"{% if cart.attributes["Uso del CFDI"] == "G01 Adquisición de mercancias" %} selected{% endif %}>G01 Adquisición de mercancias</option>
<option value="G02 Devoluciones descuentos o bonificaciones"{% if cart.attributes["Uso del CFDI"] == "G02 Devoluciones descuentos o bonificaciones" %} selected{% endif %}>G02 Devoluciones, descuentos o bonificaciones</option>
<option value="G03 Gastos en general"{% if cart.attributes["Uso del CFDI"] == "G03 Gastos en general" %} selected{% endif %}>G03 Gastos en general</option>
<option value="I01 Construcciones"{% if cart.attributes["Uso del CFDI"] == "I01 Construcciones" %} selected{% endif %}>I01 Construcciones</option>
<option value="I02 Mobilario y equipo de oficina por inversiones"{% if cart.attributes["Uso del CFDI"] == "I02 Mobilario y equipo de oficina por inversiones" %} selected{% endif %}>I02 Mobilario y equipo de oficina por inversiones</option>
<option value="I03 Equipo de transporte"{% if cart.attributes["Uso del CFDI"] == "I03 Equipo de transporte" %} selected{% endif %}>I03 Equipo de transporte</option>
<option value="I04 Equipo de computo y accesorios"{% if cart.attributes["Uso del CFDI"] == "I04 Equipo de computo y accesorios" %} selected{% endif %}>I04 Equipo de computo y accesorios</option>
<option value="I05 Dados troqueles moldes matrices y herramental"{% if cart.attributes["Uso del CFDI"] == "I05 Dados troqueles moldes matrices y herramental" %} selected{% endif %}>I05 Dados, troqueles, moldes, matrices y herramental</option>
<option value="I06 Comunicaciones telefónicas"{% if cart.attributes["Uso del CFDI"] == "I06 Comunicaciones telefónicas" %} selected{% endif %}>I06 Comunicaciones telefónicas</option>
<option value="I07 Comunicaciones satelitales"{% if cart.attributes["Uso del CFDI"] == "I07 Comunicaciones satelitales" %} selected{% endif %}>I07 Comunicaciones satelitales</option>
<option value="I08 Otra maquinaria y equipo"{% if cart.attributes["Uso del CFDI"] == "I08 Otra maquinaria y equipo" %} selected{% endif %}>I08 Otra maquinaria y equipo</option>
<option value="D01 Honorarios médicos dentales y gastos hospitalarios"{% if cart.attributes["Uso del CFDI"] == "D01 Honorarios médicos dentales y gastos hospitalarios" %} selected{% endif %}>D01 Honorarios médicos, dentales y gastos hospitalarios</option>
<option value="D02 Gastos médicos por incapacidad o discapacidad"{% if cart.attributes["Uso del CFDI"] == "D02 Gastos médicos por incapacidad o discapacidad" %} selected{% endif %}>D02 Gastos médicos por incapacidad o discapacidad</option>
<option value="D03 Gastos funerales"{% if cart.attributes["Uso del CFDI"] == "D03 Gastos funerales" %} selected{% endif %}>D03 Gastos funerales</option>
<option value="D04 Donativos"{% if cart.attributes["Uso del CFDI"] == "D04 Donativos" %} selected{% endif %}>D04 Donativos</option>
<option value="D05 Intereses reales efectivamente pagados por créditos hipotecarios (casa habitación)"{% if cart.attributes["Uso del CFDI"] == "D05 Intereses reales efectivamente pagados por créditos hipotecarios (casa habitación)" %} selected{% endif %}>D05 Intereses reales efectivamente pagados por créditos hipotecarios (casa habitación)</option>
<option value="D06 Aportaciones voluntarias al SAR"{% if cart.attributes["Uso del CFDI"] == "D06 Aportaciones voluntarias al SAR" %} selected{% endif %}>D06 Aportaciones voluntarias al SAR</option>
<option value="D07 Primas por seguros de gastos médicos"{% if cart.attributes["Uso del CFDI"] == "D07 Primas por seguros de gastos médicos" %} selected{% endif %}>D07 Primas por seguros de gastos médicos</option>
<option value="D08 Gastos de transportación escolar obligatoria"{% if cart.attributes["Uso del CFDI"] == "D08 Gastos de transportación escolar obligatoria" %} selected{% endif %}>D08 Gastos de transportación escolar obligatoria</option>
<option value="D09 Depósitos en cuentas para el ahorro primas que tengan como base planes de pensiones"{% if cart.attributes["Uso del CFDI"] == "D09 Depósitos en cuentas para el ahorro primas que tengan como base planes de pensiones" %} selected{% endif %}>D09 Depósitos en cuentas para el ahorro, primas que tengan como base planes de pensiones</option>
<option value="D10 Pagos por servicios educativos (colegiaturas)"{% if cart.attributes["Uso del CFDI"] == "D10 Pagos por servicios educativos (colegiaturas)" %} selected{% endif %}>D10 Pagos por servicios educativos (colegiaturas)</option>
<option value="P01 Por definir"{% if cart.attributes["Uso del CFDI"] == "P01 Por definir" %} selected{% endif %}>P01 Por definir</option>
</select>
</p>
</div>
