1

Estoy teniendo muchos problemas para hacer lo que necesito.

Paso a explicar el código y el problema:

introducir la descripción de la imagen aquí

El usuario debe elegir los gustos de helado que desea haciendo click en los checkboxes de la imagen y luego enviar el pedido mediante el botón "Enviar Pedido".

<!-- Modal -->
<div id="vasoModal" class="modal">
    <div class="modal-content">
        <h4 class="modal-title">Vasito</h4>
        <h6>Seleccione hasta dos gustos</h6>
        <form id="vasitoForm" method="post">
            <table class="tabla">
                    <tr th:each="gusto : ${gustos}">
                        <td class="flavour" th:text="${gusto.nombre}"></td>
                        <td><input class="single-checkbox" type="checkbox" th:value="${gusto.id}"/></td>
                    </tr>
            </table>
            <p id="errorGustos"></p>
            <button type="submit" class="btn-submit">Enviar Pedido</button>
        </form>
    </div>
</div>

Mi código JavaScript valida que gustos fueron clickeados y los guarda en un arreglo. Luego debería hacer un POST de ese arreglo al controlador Java.

/* Validar checkboxes clickeados */
var checkboxes = document.querySelectorAll('.single-checkbox');
var clickeados = [];

checkboxes.forEach(elem => {
    elem.addEventListener('change', (event) => {
        event.stopPropagation();
        if(elem.checked) {
           if(!clickeados.includes(elem)){
                   clickeados.push(elem);
                   console.log(clickeados);
           }
        }
        else{
            if(clickeados.includes(elem)){
                   clickeados.pop(elem);
                   console.log(clickeados);
            }
        }
    });
});

/* Validar cuantos gustos fueron seleccionados antes de hacer el submit */
$('#vasitoForm').on('submit', (event) => {
    if(clickeados.length == 0){
        event.preventDefault();
        document.getElementById("errorGustos").innerHTML = "Debe seleccionar por lo menos un gusto";
    }
    else if(clickeados.length > 0 && clickeados.length < 3){
        $('#vasitoForm').attr('action', clickeados + '/pedido');
    }
});

El post se hace pero el controlador Spring recibe el arreglo como "[object HTMLInputElement]" y no como un arreglo para que yo lo pueda validar ....

Acá estoy trabado, no sé como validar desde el controlador los datos del arreglo (los checkbox que fueron clickeados) para luego poder mostrarle los gustos seleccionados al usuario en una nueva página.

Alguna idea ?

Este es el código del controlador, pero no creo que esté bien porque no me anda:

    @RequestMapping(value="{gustos}/pedido", method = RequestMethod.POST)
    public void pedido(HttpServletRequest request) {

        Map<String, String[]> dataFeed = request.getParameterMap();

        for (Map.Entry<String, String[]> entry : dataFeed.entrySet()) {
            for (String str : request.getParameterValues(entry.getKey())) {
                int gustoId = Integer.parseInt(entry.getKey());
                Gusto gusto = gustoService.findGustoById(gustoId);
                System.out.println(gusto.toString());
//                if (str.equals("some-value")) { // where some-value is value="some-value" on your checkbox
//                    // do something with the gusto
//
            }
        }
    }
4
  • Has probado a poner un atributo namea esos inputs? Commented el 26 nov. 2018 a las 16:09
  • no ... porque los input's son dinamicos en el template, osea, están hechos con ThymeLeaf dentro de un th:each que depende de la cantidad de gustos en la BD ... igualmente, que se te ocurre con los names ? Commented el 26 nov. 2018 a las 16:22
  • Sí, pero si quieres recibir como un array esos campos, puedes ponerles a todos los checks el mismo nombre y el navegador los agrupará al mandar el form Commented el 26 nov. 2018 a las 16:37
  • Como sería la solución que planteas ?? Que debería hacer ? Commented el 26 nov. 2018 a las 16:40

1 respuesta 1

1

Cuando en un formulario tienes varios campos con el mismo nombre, estos se agrupan en un array al mandar tu request (al hacer submit). En el caso de los checkboxes, se mandan los valores (value) de todos los que estén marcados:

const form=document.getElementById('form');

form.addEventListener('submit',(event) =>{
   const fd= new FormData(form);
   
  console.log(fd.getAll('box'));
  event.preventDefault();
});

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="checkbox" name="box" value="prueba1"/><label>Prueba1</label>
<input type="checkbox" name="box" value="prueba2"/><label>Prueba2</label>
<input type="checkbox" name="box" value="prueba3"/><label>Prueba3</label>
<input type="checkbox" name="box" value="prueba4"/><label>Prueba4</label>
<input type="checkbox" name="box" value="prueba5"/><label>Prueba5</label>
<button>test</button>
</form>

Hago un prevent default para evitar que se haga el submit, sólo queremos simularlo, pero puedes ver que en la consola se ve lo que se va a enviar

1
  • Todos los días se aprende algo nuevo ... muchas gracias, esta solucion está buenisima y me ahorró código y dolores de cabeza ! Commented el 26 nov. 2018 a las 17:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.