Obtuve un script que verifica todos los formularios en mi aplicación y, si hay uno, que se envía, evitará el envío, alternará una pantalla de carga y luego enviará el formulario.

 <script> document.addEventListener('DOMContentLoaded', () => { const forms = document.querySelectorAll('form'); forms.forEach((form) => { form.addEventListener('submit', (e) => { e.preventDefault(); document.getElementById('loading').classList.toggle('hidden'); form.submit(); }) }); }); </script>

Esto funciona perfectamente, pero para algunos formularios (como un botón de eliminación) quiero preguntarle al usuario si esto es realmente lo que quiere hacer:

 <form method="post" action="<?=base_url('clients/' . $meeting->cid);?>" onsubmit="return confirm('Are you sure?');"> <input type="hidden" name="delmeeting" value="<?=$meeting->id;?>"> <input type="submit" value="Delete" class="button"> </form>

Esto está en conflicto con el primer guión. La alerta se muestra correcta, pero cuando la cancelo, el primer script aparece y se envía.

¿Cómo puedo manejar esto?

Qué es importante para mi:

• mostrar el div de carga cada vez para cada formulario
• tener la posibilidad de tener formularios con y sin ventana de confirmación
• mantener el código pequeño
• tener textos individuales para la confirmación