I've this sweetalert triggered on submit of a form.
$(".swa-confirm").on("submit", function(e) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: false,
html: false
}, function() {
}
);
});
but on clicking confirm I want it to continue submiting the form...
Bad ideas come to mind, like:
var confirmed = false;
$(".swa-confirm").on("submit", function(e) {
var $this = $(this);
if (!confirmed) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: true,
html: false
}, function() {
confirmed = true;
$this.submit();
});
}
});
or moving swa to button click instead of on submit, and using on submit of a form.
but I don't like this solution, it looks frankesteini to me. Surely there is a better way
$('#btn-submit').on('click',function(e){
e.preventDefault();
var form = $(this).parents('form');
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(isConfirm){
if (isConfirm) form.submit();
});
});
I know this is late but it might help someone in the future, I've used this with success for submitting forms with sweetalert confirmations.
$('#form_id').submit(function (e, params) {
var localParams = params || {};
if (!localParams.send) {
e.preventDefault();
}
//additional input validations can be done hear
swal({
title: "Confirm Entry",
text: "Are you sure all entries are correct",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#6A9944",
confirmButtonText: "Confirm",
cancelButtonText: "Cancel",
closeOnConfirm: true
}, function (isConfirm) {
if (isConfirm) {
$(e.currentTarget).trigger(e.type, { 'send': true });
} else {
//additional run on cancel functions can be done hear
}
});
});
Here's another example, asking the user to confirm via checkbox.
<form id="myForm">
<button type="submit" id="btn-submit">Submit</button>
</form>
$(document).on('click', '#btn-submit', function(e) {
e.preventDefault();
swal({
title: 'Confirm',
input: 'checkbox',
inputValue: 0,
inputPlaceholder: ' I agree with the Terms',
confirmButtonText: 'Continue',
inputValidator: function (result) {
return new Promise(function (resolve, reject) {
if (result) {
resolve();
} else {
reject('You need to agree with the Terms');
}
})
}
}).then(function (result) {
$('#myForm').submit();
});
});
I believe this is a little more elegant:
$(".swa-confirm").submit(function (e) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: false,
html: false
}, function(){
$(".swa-confirm").off("submit").submit();
});
});
function testalert(){
swal(
{
title : "Are you sure?",
text : "You want to save?",
type : "warning",
allowEscapeKey : false,
allowOutsideClick : false,
showCancelButton : true,
confirmButtonColor : "#DD6B55",
confirmButtonText : "Yes",
showLoaderOnConfirm: true,
closeOnConfirm : false
},
function (isConfirm) {
if (isConfirm) {
profileinfo.submit();
return true;
}
return false;
}
);
}
var form = $(this).parents('form');
swal({
title: "Are you sure?",
icon: "warning",
buttons:[
'No, cancel it!',
'Yes, I am sure!'
],
}).then(function(isConfirm){
if(isConfirm){
form.submit();
}
});
100% Working!!
Do some little trick using attribute. In your form add an attribute like data-flag in your form, assign "0" as false.
<form class="swa-confirm" data-flag="0">
//your inputs
</form>
In your jquery.
$(".swa-confirm").on("click", function(e) {
$flag = $(this).attr('data-flag');
if($flag==0){
e.preventDefault(); //to prevent submitting
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: true,
html: false
}, function( confirmed ) {
if( confirmed ){
// if confirmed change the data-flag to 1 (as true), to submit
$('.swa-confirm').attr('data-flag', '1');
$('.swa-confirm').submit();
}
});
}
return true;
});
Apply the class .swa-confirm to the input submit
$(".swa-confirm").on("click", function(e) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: true,
html: false
}, function( confirmed ) {
if( confirmed )
$(this).closest('form').submit();
});
});
First prevent the button event. After, launch the sweetalert and if "confirmed" is true then submit #my-form element.
Sorry for my bad english, regards from Mexico, I used Google translate :v.
You can use this
$('#deleteamc').on('click',function(e) { event.preventDefault(); var form = this; swal({ title: "Are you sure?", text: "All data related to this AMC ID will be parmanently deleted", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, DELETE it!", cancelButtonText: "No, cancel please!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) { form.submit(); } else { swal("Cancelled", "AMC Record is safe :)", "error"); } }); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="POST" id="deleteform"> <input type="hidden" name="amccode" id="amccode" value="<?php echo $row['amccode']; ?>"> <button class="btn btn-danger" id="deleteamc" name="delete" type="submit"> <i class="fa fa-minus"></i> Delete </button> </form>
Just Replace
You code is fine just replace $this.submit();
to $( "button[name=submit]" ).trigger('click');
Just Do like this one
$('.finalpost').click(function (e){ e.preventDefault(); let form = $(this).parents('form'); swal({ title: 'Are you sure?', text: 'Before post please recheck all transaction and your closing balance is correct, As you cannot alter/delete the transaction after post?', icon: 'warning', buttons: ["Make Changes", "Yes!"], }).then(function(value) { if(value){ form.submit(); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <input type="submit" value="Post" name="post" class="btn btn-primary finalpost" style="background:#ff5733 !important; color:white !important;">
If you guys want Sweet alert with native HTML form validation, check this way:
$(document).on("click", ".submit", function (e) {
e.preventDefault();
var $invoiceForm = $('.form-create');
if (!$invoiceForm[0].checkValidity()) {
$invoiceForm[0].reportValidity()
} else {
swal({
title: "Are you sure?",
text: "Did you check all the inputs and calculations?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, Submit!",
}).then(function (result) {
$invoiceForm.submit();
});
}
});
Here's the Vanilla Javascript
version should you have multiple submit buttons. No jQuery is needed .
<button class="submit" type="submit"
data-confirm="Are you sure you want to submit this?"
data-icon="warning"
data-color="#e55353">
Submit
</button>
document.querySelectorAll('.submit').forEach(item => {
item.addEventListener('click', function(event){
event.preventDefault();
let form = this.closest('form');
Swal.fire({
icon: this.getAttribute('data-icon'),
text: this.getAttribute('data-confirm'),
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No',
iconColor: this.getAttribute('data-color'),
confirmButtonColor: this.getAttribute('data-color'),
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
})
})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.