0
212
Views¿Cómo puedo pasar el valor de la lista desplegable como un enlace para el botón?
Estoy creando una aplicación web (usando thymeleaf, html, css, javascript) y me encontré con un problema. Digamos que tengo una barra de búsqueda y un botón como este:
Ahora bien, esto representa la funcionalidad de una aplicación y actualmente solo puede buscar registros de una tabla por su nombre. Pero quiero agregar algunas otras funciones como "buscar por población", "buscar por capital", etc. Planeaba crear una lista desplegable al lado de la barra de búsqueda donde se incluirán estas opciones, y el usuario seleccionará de esa lista de cómo quiere buscar un registro. No puedo ver una manera de hacer eso. Actualmente este es un código de barras de búsqueda:
<h4 class="left"> <form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get"> <div class="row mb"> <div class="child">Search by State Name:</div> <div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline mr"/></div> <div class="child box-3"> <button class="btn">Search!</button> </div> </div> </form> </h4>Por lo tanto, no tengo claro cómo hago esto porque necesito especificar el enlace para el botón en función de lo que el usuario elegirá de la lista. ¡Cualquier ayuda es apreciada!
1 answers
Answer question0
Puedes crear un elemento <select> con opciones cuyo valor indique cuál debe ser la acción del formulario. Siempre que cambie su valor, puede actualizar la acción del formulario.
document.getElementById('search-by').addEventListener('change', function(e) { let searchBy = this.value; console.log(searchBy); this.form.action = `/events/${searchBy}`; }); <form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get"> <div class="row mb"> <div class="child">Search by <select id="search-by"> <option value="showByState">State Name</option> <option value="showByPopulation">Population</option> <option value="showByCapital">Capital</option> </select>:</div> <div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline mr" /></div> <div class="child box-3"> <button class="btn">Search!</button> </div> </div> </form>