I wanted to pause form's onsubmit, so I could ask user to confirm action before proceed.
So here's my form:
<form action="<%= request.getContextPath()%>/Controller"
method="POST" id="remove_book"
onsubmit="alertBookInfo('return_book')">
</form>
Then, I created the JavaScript function, using SweetAlert:
function alertInfo(action) {
document.querySelector(action).addEventListener('submit', function (e) {
var form = this;
e.preventDefault();
if (action === "remove_book") {
swal({
title: "Remove book?",
text: "Watch out",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes.",
cancelButtonText: "No.",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
swal({
title: "Deleted.",
text: "Done.",
type: "success"
}, function () {
form.submit();
});
} else {
swal("Cancelled", "Not done.", "error");
}
});
}
});
}
But for some reason, I am unable to prevent page reload on form submit. Am I doing someting wrong?
PS: I already tried with return alertInfo() in form and returning boolean value from JS function with no success.
Why not call the function from the form like this, the the alert will be prompt before submitting the form:
HTML
<form action="<%= request.getContextPath()%>/Controller" method="GET" id="remove_book" onclick="myAlertFunction(event)">
<input type="submit">
</form>
JavaScript
function myAlertFunction(event) {
event.preventDefault()
swal({
title: "Remove book?",
text: "Watch out",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes.",
cancelButtonText: "No.",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal({
title: "Deleted.",
text: "Done.",
type: "success"
}, function() {
$("#remove_book").submit();
});
} else {
swal("Cancelled", "Not done.", "error");
}
});
}
And if you want to prevent the reload, you can always use event.preventDefault()
Here is an example: JSFiddel
If you don't want the page reloads you could use an AJAX call. When you use the submit() you will always reload the page because is how submit works.
$.ajax({
method: "POST",
url: YOUR_ACTION_URL,
data: $('form').serialize(),
success: function(data){
//here you could add swal to give feedback to the user
}
});
In your controller you have to define the method as produces JSON, if you are using Spring, the annotation is #ResponseBody
Related
I am using the following code in html
<form name = "RegForm" id = "RegForm" class="form-horizontal" method= "post" onsubmit = "return SveFrm();" action = "action.php">
In the function, I am checking for errors and when found, I issue an alert:
function SveFrm(){
....
if (err > 0){
swal({ title: "Warning!",
text: "Some entries are missing.\nDo you still want to save this?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#5cb85c",
confirmButtonText: "Yes!",
cancelButtonText: "Cancel!",
closeOnConfirm: true,
closeOnCancel: true },
function(isConfirm){
if (isConfirm) {
return true;
} else {
event.preventDefault();
event.stopPropagation();
return false;
}
});
}
}
When the error is encountered, the alert flashes for a second and then the form is submitted automatically without waiting for any user input. There are no other catchable errors in my code. Clearly, something is wrong with my codes. Please help me correct it.
Remove these codes lines you can't use it, there is no reference to the event in you're function
event.preventDefault();
event.stopPropagation();
stop the default action of submitting the form
<form onsubmit="event.preventDefault(); SveFrm();">
if everything is ok submit the form
if (isConfirm) {
document.forms['RegForm'].submit();
}
This is the sweet-alert I am using and I am changing the color of a button from red to green when it is clicked.but I don't want the page to reload when the confirm button is clicked.The issue is that the sweet alert is not closing when I click the confirm button.any help would be appreciated greatly
function UpdateChildStatus(id,status)
{
$.ajax({
method:'get',
url:'updateChildrenStatus',
data:{id:id,status:status},
success:function(result){
if (status===1)
{
swal({
title: "Successfully Enabled!",
type: "success",
showCancelButton: false,
confirmButtonColor: "#2ECC71",
confirmButtonText: "Ok",
closeOnConfirm: true },
function (confirm) {
location.reload();
});
}
else
{
swal({
title: "Successfully Disabled!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#E74C3C",
confirmButtonText: "Ok",
closeOnConfirm: true },
function (confirm) {
$("#'id'").attr('class', 'btn btn-block btn-success');
event.preventDefault();
});
}
},
error:function(x, y, thrownError){
console.log(thrownError);
}
});
}
if you are calling the function from your html like this:
<button onclick="someFunc()">,
You need to change that to
<button onclick="return someFunc()">
also, at the end of your function in javascript, add:
return false;
That should be enough to prevent the page from reloading on click. If you could provide your code a little bit in detail, I can modify it for you. :)
I have Categories listed in a view. A delete category button is also there in the view which does work and deletes the category when clicked.
What I want to do is before deleting a category, a sweet alert dialog to pop up and ask for confirmation. If confirmed, it should go to the defined route and delete the category.
The delete link is defined like this:
<a id="delete-btn" href="{{ route('admin.categories.destroy', $category->id) }}" class="btn btn-danger">Delete</a>
and the script is defined like this:
<script>
$(document).on('click', '#delete-btn', function(e) {
e.preventDefault();
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled","Category deletion Cancelled", "error");
}
});
});
</script>
However, when I click the delete button it deletes the category, but the sweet alert message doesn't show up.
The route is defined as following:
Route::get('/categories/destroy/{category}', [
'uses' => 'CategoriesController#destroy',
'as' => 'admin.categories.destroy',
]);
and the controller function is defined as:
public function destroy(Category $category)
{
$category->delete();
//this alert is working fine. however, the confirmation alert should appear
//before this one, which doesn't
Alert::success('Category deleted successfully', 'Success')->persistent("Close");
return redirect()->back();
}
Any help would be appreciated. Thanks.
Try this:
<script>
var deleter = {
linkSelector : "a#delete-btn",
init: function() {
$(this.linkSelector).on('click', {self:this}, this.handleClick);
},
handleClick: function(event) {
event.preventDefault();
var self = event.data.self;
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled", "Category deletion Cancelled", "error");
}
});
},
};
deleter.init();
</script>
EDIT: From your comment at #kalyan-singh-rathore's answer, I think you're not properly injecting the script in your blade template. If you're extending a base layout, make sure you've included the script or yielded it from a child layout.
Write anchor in below way.
Delete
Now in URL select change href to customParam.
function (isConfirm) {
if (isConfirm) {
window.location = link.attr('customParam');
} else {
swal("cancelled", "Category deletion Cancelled", "error");
}
}
Basically in your case both href and event lisner are on click.
Try this one it worked out for me :)
document.querySelector('#promote').addEventListener('submit', function (e) {
let form = this;
e.preventDefault(); // <--- prevent form from submitting
swal({
title: "Promote Students",
text: "Are you sure you want to proceed!",
type: "warning",
showCancelButton: true,
// confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false,
dangerMode: true,
}).then((willPromote) => {
e.preventDefault();
if (willPromote.value) {
form.submit(); // <--- submit form programmatically
} else {
swal("Cancelled", "No students have been promoted :)", "error");
e.preventDefault();
return false;
}
});
});
I am using Meteor and Aldeed's Autoform. I want to check that the user is certain before submission takes place. I have tried many things but when I press the button, the form submits anyway. Here's what I have now, which produces a modal nicely (with SweetAlert) even though submission occurs in the background anyway:
AutoForm.hooks({
createEventForm: {
before: function() {
this.event.preventDefault();
},
beginSubmit: function() {
this.event.preventDefault();
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: true },
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success"); });
},
How can I make the form wait for the user to confirm or cancel the operation?
Thanks!
The beginSubmit is called at the beginning of the form submission. As the documentation states, it can be used to disable/enable buttons or showing a wait message when submitting longer requests. If you want to display a confirmation message and submit the form depending on the user's decision, you need to use the before hook.
For example:
AutoForm.hooks({
createEventForm: hooksObject
});
var hooksObject = {
before: {
insert: function(doc) {
var self = this;
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: true
}, function(isConfirm) {
if (isConfirm) {
/* Submit form: */
self.result(doc);
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
/* Async cancel form submission: */
self.result(false);
}
});
}
}
}
Currently this is the code I use to run a normal confirm window based on the class "confirmation". This is all done with an href link and not on a button onClick event. As the result of the click is to run another code snipped placed in a different file (with the intention to delete a row in db).
$('.confirmation').on('click', function () {
return confirm('Er du sikker på at du vil slette?');
});
What I want is to replace the confirm method with this SweetAlert 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!",
closeOnConfirm: false
}, function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
Anyone know how to do this, what happens when I try to place the sweetalert inside the onClick function is that the alert appears but it automatically delete the row without me having to confirm anything and the alert fades out.
I found the solution!
$('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
swal({
title: "Leave this site?",
text: "If you click 'OK', you will be redirected to " + linkURL,
type: "warning",
showCancelButton: true
}, function() {
// Redirect the user
window.location.href = linkURL;
});
}
I made this codepen in case anyone wants to debug. It appears this is working (check the browser console log for when 'done' is printed)
http://codepen.io/connorjsmith/pen/YXvJoE
$('.confirmation').on('click', 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
},
function(isConfirm){
if (isConfirm) {
console.log('done');
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
})
Add event.preventDefault(); preventDefault();
$('.confirmation').on('click', function (event) {
event.preventDefault();
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(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
});
Try this code which is mentioned as in docs:
$('.confirmation').on('click', 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!",
closeOnConfirm: false
}, function(isConfirm){
return isConfirm; //Will be either true or false
});
});
I wrote this function:
function sweetConfirm(title, text) {
event.preventDefault();
var target = $(event.target);
var href = null;
var form = null;
if (target.is("a")) href = target.attr("href");
else if (target.is("button:submit")) form = target.closest("form");
else if (target.is("button")) href = target.attr("href") || target.attr("value");
swal({
title: title,
text: text,
type: "warning",
allowOutsideClick: true,
showCancelButton: true
}, function () {
if (href) window.location.href = href;
else if (form) form.submit();
});
}
sweetConfirm function will accept a submit button, link button or a normal button and will ask before do the action.
You can use it in the following scenarios:
<a type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
Link Button 1
</a>
<button type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
Link Button 2
</button>
<form action="/" method="DELETE">
<input type="hidden" name="id" value="..">
<button type="submit" class="btn btn-danger" onclick="return sweetConfirm('Are you sure?')">
Delete
</button>
</form>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2#7.32.4/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.32.4/dist/sweetalert2.all.min.js"></script>
</head>
<body>
<a id="confirmation" href="test">Test</a>
<script type="text/javascript">
$('#confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
console.log(linkURL)
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
Swal({
title: 'sAre 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) {
window.location.href = linkURL;
}
})
}
</script>
</body>
</html>