I am using sweet alert to display an input popup. I want to add the entered email as a mailchimp subscriber.
I have no problem with the popup, but can someone help me with the webhook or API call to add a subscriber?
I'm using this example for the input popup:
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something" },
function(inputValue){
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false }
swal("Nice!", "You wrote: " + inputValue, "success");
});
Thanks,
Dave
Hope you were able to solve this, but just for the update - here is a neat way on how to do this.
Sweet alert allows for a callback on the input. Assuming you are using jquery in your project, this can be achieved like this.
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something" },
function(inputValue){
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false;
}
$.ajax({
url: "<your-url-to-mailchimp-form-submit>",
data: { email: inputValue },
type: "POST"
}).done(function(data) {
swal("Woohoo!", "You have subscribed to our mailing list", "success");
}).error(function(data) {
swal.showInputError("Ohh no, something went wrong.");
});
});
You can also evaluate the reply you get in the 'data' variable from mailchimp to display the message correctly.
Related
I have a sweetalert modal that allows users input a pin.
I have also validated it, but anytime i try sending the data to a php page.
The page dosent get the data. here is sample of my code.
Index page
<script>
$(document).ready(function(){
swal({
title: "Setup Transaction pin",
text: "Enter a memorable 4digit pin to keep your account safe and make sure every transactions comes from you.",
type: "input",
showCancelButton: false,
closeOnConfirm: false,
animation: "slide-from-top",
inputType: "number",
inputPlaceholder: "Enter a pin"
},
function(inputValue){
if (inputValue === null){
swal.showInputError("Please enter a pin!");
return false
}
if (inputValue === "") {
swal.showInputError("Please enter a pin!");
return false
}
if (inputValue.length !== 4) {
swal.showInputError("Pin must be 4digits!");
return false
}
var pin = inputValue.toString();
$.ajax({
url: './backend/edit-profile?action=register_pin',
type: 'POST',
data: {
pin: pin
},
dataType: "json",
cache: false,
contentType: false,
processData: false,
success : function(data){
if (data.code == "200"){
swal({
title: data.msg,
//text: data.msg+inputValue" \n",
type: "success",
});
} else {
swal({
title: data.msg,
// text: data.msg+" \n",
type: "error",
});
}
}
});
// swal("Nice!", "You wrote: " + inputValue, "success");
});
});
</script>
Php code
<?php
if($action == "register_pin"){
$pin = $_POST['pin']);
if(empty($pin) || strlen($pin) !== 4){
$data['msg'] = "Enter a pin $pin";
}else{
$data['code'] = 200;
$data['msg'] = "You entered $pin";
}
}
?>
Everything works fine except the value. The php code dosent echo the inputValue
I have a delete button when user click it I want a sweet alert which asks for confirmation and once the user click yes and confirm then I want to disappear current confirmation alert and show another alert which tells user deleted and then after 2 seconds page reloads.
i have done it but my issue is when user click on confirmation alert he get the another alert but with some trails of previous alert. (this is the snip showing trails in red boxe) (I did not uploaded them here because I can not due to reputation).
my js is
function deleteUser(userRow) {
var objUserRow = jQuery.parseJSON(unescape(userRow));
swal({
title: "Are you sure?",
text: "You will not be able to recover this user again",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
closeOnClickOutside: false,
}, function (isConfirm) {
if (isConfirm) {
$.ajax({
url: '../users/deleteUser',
type: 'POST',
data: objUserRow,
success: function (data) {
if (data == "success") {
//swal("User Deleted!");
swal({
title: "Deleted!",
text: "User has been deleted successfully!",
type: "success",
showConfirmButton: false,
closeOnClickOutside: false
});
setTimeout(function () { location.reload(); }, 2000);
} else if (data == "error") {
//this could be due to server side validation or server side error
swal("Error!", "An error has occured at server side", "error");
}
},
error: function () {
swal("Error!", "An error has occured at server side", "error");
}
});
}
});
}
I can not get what I am doing wrong. Please help
Try to use promises
https://sweetalert.js.org/guides/?_sm_au_=i0HmMJQJFSN6506q#using-promises
swal({
title: "Are you sure?",
text: "You will not be able to recover this user again",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
closeOnClickOutside: false,
}).then((isConfirm) => {
if (isConfirm) {
$.ajax({
url: '../users/deleteUser',
type: 'POST',
data: {},
success: function (data) {
if (data == "success") {
//swal("User Deleted!");
swal({
title: "Deleted!",
text: "User has been deleted successfully!",
type: "success",
showConfirmButton: false,
closeOnClickOutside: false
});
setTimeout(function () { location.reload(); }, 2000);
} else if (data == "error") {
//this could be due to server side validation or server side error
swal("Error!", "An error has occured at server side", "error");
}
},
error: function () {
swal("Error!", "An error has occured at server side", "error");
}
});
}
});
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to insert the inputValue of sweetalert into my database. I have a query to insert:
swal("Nice!", "Notes: " + inputValue, "success");
But it doesn't work
My code:
function show_confirm_delete<?=$data->proposalID?>(){
setTimeout(function () {
swal({
title: "Yakin ingin me-reject Proposal?",
text: "Beri alasan kenapa anda mereject proposal ini.",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Tulis disini"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "Notes: " + inputValue, "success");
window.location.href = "proses-reject.php?id=<?=$data->proposalID?>";
}); }, 1);}
Please help me. Thanks!
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
I am having an issue with sweetalert dialog box with text field in chrome.
It works just fine in mozila but does not works in chrome.
Alert box works but does not allow to enter a value in texbox.
below is the jquery
function sendmail(val){
swal({
title: "Send E-Mail",
text: "<input type='email' class='form-control' name='email' id='email'/>",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Send",
html: true,
closeOnConfirm: false
},
function (isConfirm) {
if (isConfirm) {
var email = $("#email").val();
var dataString = 'email=' + email + '&id=' + val;
$.ajax({
type: "POST",
url: "../class/sendmail.php",
data: dataString,
cache: false,
success: function (result) {
swal("sent!", "Your Mail has been sent.", "success");
}
});
}
});}
I think it's two things, firstly you're using sweet alert's input wrong. You want to change the type of the sweet alert to input.
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something" },
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
That's taken from the example on the sweetalert Website
Also as you're adding the input#email after DOM load you need to use something like jQuery's .on() functionality.