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('Inplete ID');
return false;
}
if ($("#m").val().length>9){
alertify.warning('Error');
return false;
}
if ($("#c").val().length>200){
alertify.warning('Write less ments 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.
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('Inplete ID');
return false;
}
if ($("#m").val().length>9){
alertify.warning('Error');
return false;
}
if ($("#c").val().length>200){
alertify.warning('Write less ments 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.
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'
);
}
});
});