I’m working on a project that needs confirmation before submit the form, to do that I’m using SweetAlert2 but it doesn’t work in any way. I tried with the code from another threads but I have the same issue, the page loads and when I submit the form, it doesn’t do anything (well, it submits the information without verifications or questions). It works already like a beta version without the SweetAlert.
The HTML Form is something like this:
´<form class="form-register col-8" method="post" action="insert.php" enctype="multipart/form-data"> <select name="subjects"> <option disabled="disabled">Select</option> <--!Here I have PHP code to list things from DB --> </select> <input id="m" type="text"/> <select name="tempo"> <option disabled="disabled">Select<option> <!--Regular options list--> <select> <input id="c" type="text"/> <input type="submit" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/> </form>´
My functional script without SweetAlert:
$(document).ready(function(){ $(".form-register").submit(function(){ if ($("#m").val().length<9){ alertify.warning('Incomplete ID'); return false; } if ($("#m").val().length>9){ alertify.warning('Error'); return false; } if ($("#c").val().length>200){ alertify.warning('Write less comments please'); return false; } else { var Con= confirm("Click ok if you are sure"); if(Con == true) { return true; } { return false; } } });
});
Note: I’m using the SweetAlert2 8.X from jsdelivr. I tried to separate this script in a function and including it in the else (works at 50%, even if I quit the first two $ functions):
$(document).ready(function(){ $('.form-register').submit(function (e){ e.preventDefault(); const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger' }, buttonsStyling: false, }) swalWithBootstrapButtons.fire({ title: 'Are you sure?', text: "Check plz", type: 'warning', showCancelButton: true, confirmButtonText: 'OK', cancelButtonText: 'Cancel', reverseButtons: true }).then((result) => { if (result.value) { swalWithBootstrapButtons.fire( 'Finished', 'Success', 'success', ), function(submit){ form.submit(); } } else if ( result.dismiss === Swal.DismissReason.cancel ) { swalWithBootstrapButtons.fire( 'Canceled', 'Do corrections and then retry :)', 'error' ) } }) });
});
I tried to replace the submit type in the input with a button, and another selectors in the head of the script. The only thing I need is a confirmation to proceed with the insert of data on insert.php, and if the user cancel return another message of error if it’s possible… thanks in advance.
Advertisement
Answer
Change:
<input type="submit" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/>
To:
<input type="button" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/>
Then, in your JS, listen for the click on “#btn-ok”, then just programmatically submit the form using $form.submit(). See below:
$(document).ready(function() { $('form #btn-ok').click(function(e) { let $form = $(this).closest('form'); const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger' }, buttonsStyling: false, }) swalWithBootstrapButtons.fire({ title: 'Are you sure?', text: "Check plz", type: 'warning', showCancelButton: true, confirmButtonText: 'OK', cancelButtonText: 'Cancel', reverseButtons: true }).then((result) => { if (result.value) { swalWithBootstrapButtons.fire( 'Finished', 'Success', 'success', ); $form.submit(); } else if ( result.dismiss === Swal.DismissReason.cancel ) { swalWithBootstrapButtons.fire( 'Canceled', 'Do corrections and then retry :)', 'error' ); } }); });