Tengo un formulario con 4 menús desplegables de selección dependientes. Lo que quiero es ocultar/deshabilitar el botón Enviar hasta que se elija la opción de la última selección.
const select = document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0]; const submitButton = document.querySelectorAll(".button, .woof_submit_search_form"); document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0].addEventListener('change', () => { if (select.value === '0') { submitButton.disabled = true; } else { submitButton.disabled = false; } }); <select class="f_select f_select_product_cat f_select_product_cat_0" name="product_cat"> <option value="0">Select cat 1</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <select class="f_select f_select_product_cat f_select_product_cat_1" name="product_cat"> <option value="0">Select cat 2</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <select class="f_select f_select_product_cat f_select_product_cat_2" name="product_cat"> <option value="0">Select cat 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <select class="f_select f_select_product_cat f_select_product_cat_3" name="product_cat"> <option value="0">Select cat 4</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <button class="button f_submit_search_form">SEARCH</button>No tengo mucho control sobre la representación de formularios, por lo que mi mejor opción es obtener tanto el botón como la última selección por nombre de clase, pero como puede ver, tienen varias clases.
Intenté también obtener la selección con getElementsByName("product_cat")[0] pero tampoco funciona.
Cualquier ayuda apreciada.
El primer problema que veo es que está configurando el submitButton de envío como disabled cuando el valor es 0 . Pero realiza esa verificación solo cuando el valor de la misma cambia a medida que escucha el change .
Solo tiene un botón, ¿por qué usaría document.querySelectorAll para recuperarlo? Simplemente usa querySelector . Más que eso, es un problema aquí, ya que está intentando establecer una lista de NodeList en disabled = true y no en un elemento. Para que lo entiendas, aquí están ambos resultados.
NodeList [button.button.f_submit_search_form, disabled: true] 0: button.button.f_submit_search_form ¡Excelente, ahora vemos por qué no funcionó! ¡Estamos tratando de establecer disabled = true en una lista de nodos cuya forma es similar a una matriz!
Entonces, en nuestro caso, solo necesitamos un elemento, por lo que podemos arreglarlo usando querySelector.
<button class="button f_submit_search_form" disabled="">SEARCH</button> Eso se parece mucho más a lo que necesitamos: el botón solo. ¡Y ahora, nuestro .disabled tiene sentido y funciona!
const select = document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0]; const submitButton = document.querySelector(".button, .woof_submit_search_form"); select.addEventListener("change", () => { if (select.value === '0') { submitButton.disabled = true } else { submitButton.disabled = false } }) Sin embargo, esa lógica tiene un pequeño defecto: solo estamos configurando el botón de submitButton para que se muestre cuando ocurra el addEventListener .
Por lo tanto, necesitamos en el HTML para agregar disabled de forma predeterminada, por defecto, seguramente no se establecerá en nada más que el valor predeterminado.
<button class="button f_submit_search_form" disabled>SEARCH</button>Ahora funciona, el botón se habilitará SOLAMENTE si el último valor del campo es distinto de 0.