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 ?