Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 13 days ago.
Improve this question
so this is my highschool project,
This is the Button
<button onclick="btncncl(); location.href='hapus.php?id=<?= $dp["ID"]; ?>'" class="button-64" role="button"><span class="text">Delete</span></button>
this is the javascript (swal)
function btncncl() {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
}
the button works, but the swal function doesn't appear, and this code is inside php file
Because you are not passing the parameter ID into your function.
<button onclick="btncncl(<?= $dp["ID"]; ?>)" class="button-64" role="button">Delete</button>
function btncncl(id = null) {
if(id){
$.ajax({
url: "yourCancelPHPFile.php",
type: 'POST',
data: {id: id},
dataType: 'json',
success:function(response) {
if(response.success == true) {
Swal.fire({
toast: true,
icon: response.icon,
title: response.title,
position: 'top',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
});
} else {
Swal.fire({
toast: true,
icon: response.icon,
title: response.title,
position: 'top',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
});
}
}
});
}
}
Here is the solution,
I test it. you also can run and check the code.
Note: this is sweetalert2. You need to link js of it. (external or internal)
check the full code below.
document.getElementById("deleteBtn").addEventListener("click", function () {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
location.href='hapus.php?id=<?= $dp["ID"]; ?>';
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
});
<button id="deleteBtn" class="button-64" role="button"><span class="text">Delete</span></button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script src="btncncl.js"></script>
Hope you will fix it : )
function btncncl() {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
}
<button onclick=btncncl() location.href='hapus.php?id=<?= $dp["ID"]; ?>' class="button-64" role="button"><span class="text">Delete</span></button>
Hey... Look at this part
onclick="btncncl();
How to open a url in new window in sweet alert
you can use "window.open(URL,name,specs,replace)" for open in other window. Example:
swal({
title: "Are you sure?",
text: "You redirect in the new window in other page!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
window.open("https://www.google.com");
} else {
window.open("https://www.yahoo.com");
}
});
Se quiser abrir em _blank use:
window.open("https://www.google.com", '_blank');
I have a problem with Sweet Aler confirm dialog. When I click the delete icon, the Sweet Alert dialog shows for less then a second and then disappears and delete the element. With other words I don't have the chance to click "Delete" or "Cancel". How to stop this dialog to let me choose an option?
<i class="fa fa-trash-o fa-2x pull-right trashbin"></i>
---
<script type="text/javascript">
document.querySelector('i.trashbin').onclick = function(event){
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!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
};
</script>
Try adding event.preventDefault(); after:
document.querySelector('i.trashbin').onclick = function(event) {
You must replace the 'src' value from the 'a' tag with '#' and pass the 'delete=20' to the function. Then in that function if user clicks 'yes', redirect to the page specified with parameter that you passed to it. This solved my problem. I hope helps you too.
** Edited **
<i class="fa fa-trash-o fa-2x pull-right trashbin"></i>
---
<script type="text/javascript">
document.querySelector('i.trashbin').onclick = function () {
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!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}).then(function () {
swal({timer: 1000, title: "Deleted!", type: "success"});
setTimeout(function goAndDel() {
window.location.assign("insert.php?delete=20");
}, 1000);
});
}
</script>
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.
HTML
<form id="myForm">
<button type="submit" id="btn-submit">Submit</button>
</form>
JavaScript
$(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();
}
})
})
});
Im using sweet alerts for my web application. I have come across posts with the similar problem how ever they where never answered accordingly. i want to know how would i go about posting to an action result method once the user confirms. supporting code is below . help please.
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!",
cancelButtonText: " No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
}
});
I am not sure where you form is, but assuming it's id is form, then something like below may get you started:
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!",
cancelButtonText: " No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
// once confirm, post your form
$("#form").submit();
} else {
swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
}
});