sweet alert on confirm form submit (v2021)
Posted: Sun Aug 14, 2022 3:13 pm
Hi i want to add sweet alert before form submit instead of another confirm page using phpmaker 2021. any help or code kindly share please. thank you
Hi i want to add sweet alert before form submit instead of another confirm page using phpmaker 2021. any help or code kindly share please. thank you
I don't think it is available in the old v2021, you need to customize the code yourself.
Yes doing the same approach and using custom handler for controlling the form submit. On dialog (shown.bs.modal) finding the submit button and binding it with the click event. on click showing sweet alert with confirm/cancel options but cant restrict the form submission. any help or approach will highly be appreciated considering the v2021. many thanks. my code is as below
$('#ew-modal-dialog').on('shown.bs.modal', function () {
$(this).find(".ew-submit").click(function(e) {
e.preventDefault();
var btn = $(this);
Swal.fire({
title: 'Are you sure?',
text: "Do you want to continue!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, proceed it!'
}).then((result) => {
if (result.isConfirmed) {
btn.closest(".modal-content").find("form").submit();
}
});
});Here i found the alternate. hide the original submit button and add new next to it and bind on click to it. On click shows sweet alert and on true trigger (click) the original hide button and purpose solve.
$('#ew-modal-dialog').on('shown.bs.modal', function () {
var dlg = $(this);
dlg.find(".ew-submit").addClass("d-none").before("<button type='button' id='btn-submit' class='btn btn-primary px-4' title='Submit form'>Save</button>");
$("#btn-submit").focus()
.click(function(e) {
var btn = $(this);
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
Swal.fire({
title: 'Are you sure?',
text: "Do you want to continue!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, proceed it!'
}).then((result) => {
if (result.isConfirmed) {
btn.closest(".modal-content").find(".ew-submit").click();
}
});
});
});