Estoy trabajando con SweetAlert2 para mostrar un cuadro de confirmación al usuario, si marca una casilla de verificación en un formulario como este:
<form id="from1" data-flag="0" action="" method="POST"> @csrf <input type="checkbox" name="wallet_checked" onchange="this.form.submit();"> </form> Como puede ver, he usado onchange="this.form.submit();" para la casilla de verificación para enviar el formulario sin usar el botón Enviar y funciona bien.
Luego, para mostrar el mensaje de confirmación de Sweet Alert, agregué esto:
document.querySelector('#from1').onsubmit = function(e){ $flag = $(this).attr('data-flag'); if($flag==0){ e.preventDefault(); //to prevent submitting swal({ title: "Are you sure?", text: "You are about to create a transaction", type: "warning", showCancelButton: true, confirmButtonColor: '#DD6B55', confirmButtonText: 'Yes, I am sure!', cancelButtonText: "No, cancel it!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm){ swal("Shortlisted!", "Transaction successfully created", "success"); //update the data-flag to 1 (as true), to submit $('#from1').attr('data-flag', '1'); $('#from1').submit(); } else { swal("Cancelled", "Transaction didn't submitted", "error"); } }); } return true; };Pero el problema es que no aparece cuando hago clic en la casilla de verificación.
Y en Consola, no aparece ningún error.
Entonces, ¿cómo mostrar correctamente este mensaje de confirmación cuando el usuario marca la casilla de verificación?
En primer lugar, dijo que está trabajando con sweetalert2, pero el código que escribe para alert es para sweetalert, no para sweetalert2. la sintaxis es diferente para ambos.
Pruebe este Código, esto debería funcionar:
<form id="from1" data-flag="0" action="" method="POST"> @csrf <input type="checkbox" id="checkbox" name="wallet_checked"> <label>checkbox</label> </form> <script> $(function(){ $('#checkbox').on('change',function(){ let flag = $('#from1').attr('data-flag'); if(flag == 0){ Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", type: "warning", showCancelButton: true, confirmButtonColor: '#DD6B55', confirmButtonText: 'Yes, I am sure!', cancelButtonText: "No, cancel it!", closeOnConfirm: false, closeOnCancel: false }).then((result) => { if (result.isConfirmed) { Swal.fire("Shortlisted!", "Transaction successfully created", "success"); // update the data-flag to 1 (as true), to submit $('#from1').attr('data-flag', '1'); $('#from1').submit(); } else { Swal.fire("Cancelled", "Transaction didn't submitted", "error"); } }) } }); }); </script>