Related
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();
I am trying to implement sweet alert on my laravel project. But the delete method is working without the sweetalert.
in my blade file--
<div class="action-btn bg-danger ms-2">
<a class="delete-confirm" href="{{ URL::to('/delete-customer/' . $customer->id) }}" type="button">
<i class="ti ti-trash delete-confirm"></i></a>
</div>
in my controller--
public function delete($id)
{
$customer = Customer::findOrfail($id);
$customer->delete();
return redirect()->back()->with('success', __('Customer successfully deleted.'));
}
For sweetalert I used this code--
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
$('.delete-confirm').on('click', function (event) {
event.preventDefault();
const url = $(this).attr('href');
swal({
title: 'Are you sure?',
text: 'This record and it`s details will be permanantly deleted!',
icon: 'warning',
buttons: ["Cancel", "Yes!"],
}).then(function(value) {
if (value) {
window.location.href = url;
}
});
});
</script>
when I click delete button it doesn't show the sweet alert. Can anyone explain what did I miss?
Try this
$('body').on('click', '.delete-confirm', function() {
var id = $(this).attr('data-id');
Swal.fire({
title: 'Are you sure?',
text: "If You Remove A Referral You Will Not Be Able To Recover It!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then((result) => {
if (result.value === true) {
var token = $("meta[name='csrf-token']").attr("content");
$.ajax({
type: "DELETE",
url: "/referrals/" + id,
data: {
"id": id,
"_token": token,
},
success: function(result1) {
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Referral Removed ',
text: "You Have Removed A Referral",
showConfirmButton: false,
timerProgressBar: true,
timer: 1800
});
table.ajax.reload();
},
error: function(error) {
Swal.fire({
position: 'top-end',
icon: 'error',
title: 'We have some error',
showConfirmButton: false,
timerProgressBar: true,
timer: 1800
});
}
});
}
});
});
The following example ONE is from https://lipis.github.io/bootstrap-sweetalert/. While clicking anywhere outside of the alert box, the alert box won't go away. That's what I expected.
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
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");
}
});
Another example TWO is from https://sweetalert2.github.io/. It behaved in another way. While clicking anywhere outside of the alert box, the alert box is gone.
Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
type: 'info',
html:
'You can use <b>bold text</b>, ' +
'links ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel: 'Thumbs up, great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>',
cancelButtonAriaLabel: 'Thumbs down'
})
In my code base as the follows, it behaved the same way as the example TWO. While clicking anywhere outside of the alert box, the alert box is gone.
How to fix it so that the alert box won't be gone while clicking anywhere outside of the alert box? What could be the version of my sweetalert ?
swal({
title: "Message:",
text: "Here is some detailed message",
type: "warning",
buttons: {
to_refresh: {
text: "Refresh the current view",
visible: true,
closeModal: true
},
to_close: {
text: "Back to Main Menu!",
visible: true,
closeModal: true
},
},
}).then(value => {
if (value === 'to_refresh') {
// window.location.href = window.location.href;
location.reload(true);
} else {
window.location.href = "to some other link"
}
});
depending on which Swal version you are using.
For SweetAlert 2:
allowOutsideClick: false
for SweetAlert (version 1):
closeOnClickOutside: false
I want to disable the button displayed in sweet alerts so that my user cannot click the button again and again. I have attached the screen shot of the alert here
I want to disable the confirmation button (I don't want the alert to be closed):
swal({
title: "Are you sure?",
text: "You want to add this discount?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Continue",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
if (isConfirm) {
document.getElementById('message_error_new_discount').innerHTML = '';
$.post('./CURL/addNewDiscount.php', JSON.stringify({
"code": discount_code_newDiscount,
"percentage": percentage_newDiscount,
"startDate": sdate_newDiscount,
"endDate": edate_newDiscount
}), function (data) {
var text = "your discount code is " + data.code;
swal({ title: "Discount Added!", text: text, type: "success" }, function () {
window.location = './discountlist.php';
});
});
} else {
swal({ title: "Cancelled", text: "", type: "error" }, function () {
window.location = './discountlist.php';
});
}
});
Here is what you can try, if you don't want to show any button and also you can add timeout, so that it will be closed after sometime.
swal({
title: "Are you sure?",
text: "You want to add this discount?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Continue",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm){
if (isConfirm) {
document.getElementById('message_error_new_discount').innerHTML = '';
$.post('./CURL/addNewDiscount.php',JSON.stringify({
"code": discount_code_newDiscount,
"percentage": percentage_newDiscount,
"startDate": sdate_newDiscount,
"endDate": edate_newDiscount
}),function(data){
var text = "your discount code is "+data.code;
swal({title:"Discount Added!",
text:text,
type:"success",
showCancelButton: false,//There won't be any cancle button
showConfirmButton : false //There won't be any confirm button
},function(){
window.location='./discountlist.php';
});
});
}else{
swal({title:"Cancelled",text:"", type:"error"},function(){
window.location='./discountlist.php';
});
}
});
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();
}
})
})
});