2

Estoy intentando hacer un simple submit() a través de JavaScript pero en la consola me sale un error de "too much recursion" y ahí se frena el programa.

Estoy intentando de validar los clicks dentro de un modal y guardar los input's clickeados en un arreglo, si luego el arreglo cumple con ciertas condiciones se hace el submit, sino sale un mensaje de error para el usuario.

/* 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').submit();
    }
});

El preventDefault() anda bien si no se clickea nada y muestra el mensaje de error sin redirigir, pero al tener input's clickeados y hacer el submit() me sale por consola el mensaje de "too much recursion" !

El HTML es el siguiente:

<!-- Modal -->
<div id="vasoModal" class="modal">
    <div class="modal-content">
        <h4 class="modal-title">Vasito</h4>
        <h6>Seleccione hasta dos gustos</h6>
        <form th:action="@{/pedido}" 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>

Alguna idea de porque pasa esto y de como se puede solucionar ?

1 respuesta 1

9

Te analizo el código para que veas el problema:

Este código es equivalente al tuyo, pero damos un nombre a la función a ejecutar:

// Pongamos un nombre a la función
const callbackFunction = (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').submit(); // ESTE ES EL PROBLEMA
    }
}

$('#vasitoForm').on('submit', callbackFunction);

Por tanto:

  1. Asignas al evento submit la ejecución de callbackFunction.
  2. El usuario hace un submit
  3. Ha ocurrido el evento submit! Se llama a callbackFunction.
  4. La función callbackFunction cancela el evento actual con event.preventDefault();.
  5. La función callbackFunction comprueba que todo está bien y se puede hacer el submit, por lo tanto llama a form.submit(), que lanza el evento submit. GO TO 3

Entras en un bucle en el que el evento submit se para y se lanza un nuevo evento igual. Es un bucle de recursión indirecta sin caso base, luego no termina nunca y el intérprete de JS acaba sin memoria, provocando el fallo.

La solución es la siguiente:

const callbackFunction = (event) =>
  if(clickeados.length > 0 && clickeados.length < 3) {
     return; // todo va bien, dejamos que todo siga, hemos terminado
  }
  // algo no está bien, cancelamos el evento
  event.preventDefault();
  document.getElementById("errorGustos").innerHTML = "Debe seleccionar por lo menos un gusto";

}

$('#vasitoForm').on('submit', callbackFunction);

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.