function confirmdelete()
{
return swal({ title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false },
function() {
swal( 'Deleted!',
'Your file has been deleted.',
'success' );
});
}
<form action="<?=$site_url?>admin/islemler/delete.php" method="post" class="form-inline" onsubmit="return confirmdelete()">
<input type="button" id="<?=$calismalarimiz['id']?>" class="btn btn-warning btn-xs guncelle" value="Güncelle"/>
<input type="hidden" name="sil<?=$calismalarimiz['id']?>" value="<?=$calismalarimiz['id']?>"/>
<input type="submit" id="sil<?=$calismalarimiz['id']?>" class="btn btn-danger btn-xs" value="Sil"/>
</form>
if I click submit button, sweetAlert is show, but before clicking confirm or cancel button, form post delete.php
Related
I have a checkbox that have a basic value. I want to make user can change the value by clicking option in the checkbox, then show alert message to make sure they want to change it or not. If it yes, the checkbox value is changing, but if not, checkbox value is not changing.
I have tried build it using sweetalert plugin. The problem right now is, when user click checkbox value to change the value, then show sweetalert popup, the checkbox value is already changed. So I need to reload the page even user is clicked no option in sweetalert modal.
How do I can make the checkbox value only changed after user click yes option in sweetalert modal ?
here's the view code now
<div class="col-lg-6">
<!--begin::Card-->
<div class="card card-custom gutter-b example example-compact">
<div class="card-header">
<h3 class="card-title">General</h3>
</div>
<div class="card-body" style="height:80px">
<div class="checkbox-inline">
<label class="checkbox">
<input type="checkbox" name="Checkboxes2" id="checkbox1" onclick='editGeneral(this.value)'/>
<span></span>
Checkin Status
</label>
</div>
</div>
</div>
<!--end::Card-->
</div>
here's ajax code
function editGeneral(){
Swal.fire({
text: "Are you sure to change this ?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes!',
cancelButtonText: 'No'
}).then((result) => {
if(result.isConfirmed) {
var tes = $("#checkbox1").is(":checked");
$.ajax({
url: "<?php echo base_url(); ?>contoller/changefunction",
type:"POST",
dataType:"json",
data:{"config_value":tes},
success: function(response){
Swal.fire({
title: 'Success',
text: 'Status has been changed',
icon: 'success',
timer: 2000,
showCancelButton: false,
showConfirmationButton: false,
}).then((hasil) => {
location.reload();
});
}
})
}else{
Swal.fire({
timer: 10,
showCancelButton: false,
showConfirmationButton: false,
}).then((hasil) => {
location.reload();
});
}
});
}
Thank you
I have adapted your code to make it work here, as you can see I pass all the checkbox as onclick='editGeneral(this)', so when the sweet notice is confirmed or not, I will change the checkbox based on your choice .
function editGeneral(el){
Swal.fire({
text: "Are you sure to change this ?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes!',
cancelButtonText: 'No'
}).then((result) => {
if(result.isConfirmed) {
(el.checked) ? el.checked = true : el.checked = false;
/*
$.ajax({
url: "<?php echo base_url(); ?>contoller/changefunction",
type:"POST",
dataType:"json",
data:{"config_value":tes},
success: function(response){
Swal.fire({
title: 'Success',
text: 'Status has been changed',
icon: 'success',
timer: 2000,
showCancelButton: false,
showConfirmationButton: false,
}).then((hasil) => {
location.reload();
});
}
})
*/
}else{
(el.checked) ? el.checked = false : el.checked = true;
Swal.fire({
timer: 10,
showCancelButton: false,
showConfirmButton: false,
}).then((hasil) => {
//location.reload();
});
}
});
}
<div class="col-lg-6">
<!--begin::Card-->
<div class="card card-custom gutter-b example example-compact">
<div class="card-header">
<h3 class="card-title">General</h3>
</div>
<div class="card-body" style="height:80px">
<div class="checkbox-inline">
<label class="checkbox">
<input type="checkbox" name="Checkboxes2" id="checkbox1" onclick='editGeneral(this)' />
<span></span>
Checkin Status
</label>
</div>
</div>
</div>
<!--end::Card-->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#10"></script>
Another suggest the command showConfirmationButton is showConfirmButton
Message in console
TypeError: document.getElementById(...) is null.
Blade (containing a button to delete)
<td>
<i class="fa fa-pencil"></i>
<button type="button" class="btn btn-danger btn-sm"
onclick="deleteSaleItem({{ $sale->id }})">
i class="fa fa-trash"></i>
</button>
<form id="delete-form-{{ $sale->id }}" action="{{ route('secretary.sales.destroy.item',$sale->id) }}" method="POST"
style="display:none;">
#csrf
#method('DELETE')
</form>
</td>
Javascript implementation
<script>
function deleteSaleItem(id){
const swalWithBootstrapButtons = swal.mixin({
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
})
swalWithBootstrapButtons({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.value) {
event.preventDefault();
document.getElementById('delete-form-'+id).submit();
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
swalWithBootstrapButtons(
'Cancelled',
'Your data is safe :)',
'error'
)
}
})
}
</script>
I need to know what is wrong with this code which results in null. Thank You.
There is only one getElementById in your code.
document.getElementById('delete-form-'+id)
So, it might be the 'id' variable is empty or null and the element you retrieve become null.
Try debugging or console.log your 'id' variable just before document.getElementById code to see what happen to your variable.
I am using SweetAlert2. I want when user click on Reset button a popUp of SweetAlert appears for confirmation. I had done this already.
HTML
<form id="storyForm" action="ephp/storyPublish.php" method="POST">
<input type="text" name="userName" />
<input type="Email" name="userEmail" />
<button type="submit">Publish</button>
<button type="reset" class="model_img" id="sa-warning">Reset</button>
</form>
JS
$("#storyForm").on('reset', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Do you really want to reset?",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Go on!',
cancelButtonText: "Ops no!",
}).then(function(isConfirm) {
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
form.reset();
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
PopUp is appearing but form is not reseting, what's wrong with this Javascript?
Here is the Fiddle
Hi I was able to get your form to reset but not using your form.reset() function, I was able to get it to work by giving the inputs ids and then handling the reset using sweetalerts result.
HTML
<form id="storyForm" action="ephp/storyPublish.php" method="POST">
<input type="text" name="userName" id="userName" /> <!--added the id here-->
<input type="Email" name="userEmail" id="userEmail" /> <!--added the id here-->
<button type="submit">Publish</button>
<button type="reset" class="model_img" id="sa-warning">Reset</button>
</form>
JavaScript
$("#storyForm").on('reset', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Do you really want to reset?",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Go on!',
cancelButtonText: "Ops no!",
}).then((result) => {
if (result.value) {
$("#userName").val("");
$("#userEmail").val("");
swal(
'Reset!',
'Your form has been reset.',
'success'
)
/*swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
});*/
// result.dismiss can be 'cancel', 'overlay',
} else if (result.dismiss === 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
NOTE - I commented out your Success swal as it wasn't adding an invoice but if you want it to do so just un comment it and remove the sweetalert above it.
Here is a jsFiddle
I hope this helps good luck!
I have a form. I need to activate when click the submit button. how can id do this in laravel blade.
my form
<form action="{{ route('backend.tasks-send-email.store') }}" method="POST">
{{ csrf_field()}}
<label for="propertyName">Email To</label>
<input class="form-control" id="editteamName" name="teamName" type="text" id="teamName" required="true" value="" disabled>
<label for="maker-content">Message</label>
<textarea id="maker-content" name="emailContent" ></textarea>
<button type="submit" class="btn btn-primary" id="submit">button</button>
</form>
Javascipt codes
$(document).on('click', '[#submit]', function (e) {
e.preventDefault();
var data = $(this).serialize();
swal({
title: "Are you sure?",
text: "Do you want to Send this email",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, send it!",
cancelButtonText: "No, cancel pls!",
}).then(function () {
swal(
'Success!',
'Your email has been send.',
'success'
)
});
return false;
});
Try this one. in you're form add id attribute.
in your javascript when form with this id attribute is submit the sweet alert is activated.
Form
<form action="{{ route('backend.tasks-send-email.store') }}" method="POST" id="form">
{{ csrf_field()}}
<label for="propertyName">Email To</label>
<input class="form-control" id="editteamName" name="teamName" type="text" id="teamName" required="true" value="" disabled>
<label for="maker-content">Message</label>
<textarea id="maker-content" name="emailContent" ></textarea>
</form>
javascript
$(document).on('submit', '[id^=form]', function (e) {
e.preventDefault();
var data = $(this).serialize();
swal({
title: "Are you sure?",
text: "Do you want to Send this email",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, send it!",
cancelButtonText: "No, cancel pls!",
}).then(function () {
$('#form').submit();
});
return false;
});
My SweetAlert confirm is not waiting any action. Confirm box just flashes and then action will be executed. What's wrong?
<script type="text/javascript">
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
});
}
</script>
<form onsubmit="confirmDelete()" action="index.php" method="post">
<button type="submit" name="delete">Delete</button>
</form>
Also tried this. Same problem... the window just flashes and action executes.
<script type="text/javascript">
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
document.deleteForm.submit();
}
});
}
</script>
<form id="deleteForm" action="index.php" method="post">
<button onclick="confirmDelete()" type="input" name="delete">Delete</button>
</form>
You can use preventDefault:
<form id="deleteForm" action="index.php" method="post">
<button id="delete-btn" type="input" name="delete">Delete</button>
</form>
<script type="text/javascript">
$("#delete-btn").on("click", function(e) {
e.preventDefault(); //prevents the form from being submitted
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
document.deleteForm.submit();
}
});
}
</script>
Change your code as per below:
In view:
<form id="my_form" action="index.php" method="post">
DELETE
</form>
In js code:
<script>
$(document).ready(function(){
$('._delete_data').click(function(e){
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
$(document).find('#my_form').submit();
}
})
});
});
</script>