Tengo un pequeño buscador que consta de 2 selecciones "categoría" y "provincia". Me gustaría que hasta que el usuario seleccione una categoría o ubicación válida, el botón esté deshabilitado. Por razones de UX, ingresé el texto no seleccionado "seleccionar categoría" y "seleccionar ubicación". El problema es que si el usuario no selecciona nada, y deja uno o ambos valores (seleccionar categoría, seleccionar ubicación) y presiona el botón, ¡el buscador me devuelve una página de error! Así que pensé en la solución de bloquear el botón hasta que el usuario haga una elección de valdia (que excluye el texto en la opción)
Este es el código de la página:
<div class="listing-search-field category"> <select name="cat" id="category" > <option selected disabled>Select Category</option>; <?php if(is_array($categories) && count($categories)){ foreach($categories as $key => $value){?> <option value = "<?php echo esc_attr($value)?>"> <?php echo esc_attr($value)?> </option> <?php } } ?> </select> </div> <div class="listing-search-field location"> <select name="location" id="location"> <option selected disabled>Select Location</option>; <?php if(is_array($locations) && count($locations)){ foreach($locations as $key => $value){ ?> <option value = "<?php echo esc_attr($value)?>"> <?php echo esc_attr($value);?> </option> <?php } } ?> </select> </div> </div> <div class="listing-search-submit-holder"> <?php if ( listing_theme_installed() ) { echo my_theme_get_button_html(array( 'type' => 'solid', 'text' => esc_html__('Search Places', 'eltd-listing'), 'html_type' => 'button', 'hover_border_color' => '#fff', 'hover_color' => '#fff', 'icon_pack' => 'font_elegant', 'fe_icon' => 'arrow_carrot-right', 'size' => 'large' )); } ?>No soy programador, por lo que un ejemplo concreto basado en este código sería muy bienvenido.
Hola Andrea y bienvenida a stackoverflow. Lo que necesita se puede hacer fácilmente usando javascript. Déjame guiarte a través del proceso.
Según su ejemplo, parece que tiene 3 elementos importantes que desea observar o cambiar. 2 seleccionar elementos y botón enviar.
Puede seleccionar elementos como este:
<script> let firstSelect = document.querySelector('#category'); </script>En su ejemplo, desea ver esos 2 elementos seleccionados si alguno de ellos tiene la opción seleccionada.
Esto se puede hacer así:
firstSelect.addEventListener("change", myLittleFunction);Esta pieza de código está observando el elemento que llamamos firstSelect y cada vez que cambia (el usuario selecciona una opción diferente) ejecuta la función llamada myLittleFunction (creamos esta función en el siguiente paso).
En su ejemplo, tiene una condición muy simple: el usuario debe seleccionar cualquier opción cualquiera de esos 2 elementos seleccionados. Y una vez que se cumple esta condición, desea hacer algo con el botón.
Para lograr el objetivo anterior podemos hacer esto:
function myLittleFunction(){ if (firstSelect.options[firstSelect.selectedIndex].value){ //Change the button in the way you need (enable) } else { //Change the button in the way you need (disable)} }Esta función verifica si el elemento que llamamos firstSelect tiene algún valor (si la opción seleccionada tiene algún valor), si es así, puede ejecutar lo que quieras hacer. En caso de que la opción seleccionada no tenga valor, puede hacer otra cosa. Lo que debería suceder exactamente depende de usted (puede mostrar/ocultar el botón, puede agregar/eliminar clases, etc.)