Executing PHP Script After SweetAlert2 Confirmation: A Step-by-Step Guide
SweetAlert2 is a popular JavaScript library that provides beautiful and customizable modal dialogs. But how do you trigger a PHP script upon confirmation of a SweetAlert2 dialog? Let's dive into the process, building upon a real-world example from Stack Overflow.
The Problem:
The question posed on Stack Overflow (by user user2419276) deals with the need to execute a PHP function to delete a database entry after a confirmation dialog. While the SweetAlert2 setup is complete, the integration of the PHP function is the hurdle.
The Solution:
The key to this problem lies in understanding the client-server interaction. SweetAlert2 runs entirely on the client-side (your browser), while PHP code executes on the server. Therefore, a direct call from SweetAlert2 to a PHP function isn't feasible.
Here's the breakdown of a robust solution:
-
AJAX Request: When the user confirms the SweetAlert2 dialog, we'll use an AJAX (Asynchronous JavaScript and XML) request to send the confirmation to the server.
-
PHP Script: A dedicated PHP script will handle the request, execute the delete function, and return a response to the client.
-
Response Handling: The client-side JavaScript will receive the response from the server and display appropriate feedback to the user.
Code Implementation:
<!DOCTYPE html>
<html>
<head>
<title>SweetAlert2 with PHP</title>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<script>
Swal.fire({
title: 'Are you sure?',
text: 'This action cannot be undone!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
// AJAX Request
fetch('delete_entry.php', {
method: 'POST',
body: JSON.stringify({ id: 123 }) // Replace 123 with the actual ID to delete
})
.then(response => {
// Handle server response
if (response.ok) {
Swal.fire('Deleted!', 'The entry has been deleted.', 'success');
} else {
Swal.fire('Error!', 'An error occurred while deleting the entry.', 'error');
}
})
.catch(error => {
console.error('Fetch error:', error);
Swal.fire('Error!', 'An unexpected error occurred.', 'error');
});
}
});
</script>
</body>
</html>
PHP Script (delete_entry.php):
<?php
// Database connection details (replace with your own)
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database_name";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Get the ID to delete from the AJAX request
$id = $_POST['id'];
// Delete the entry
$sql = "DELETE FROM your_table WHERE id = $id";
if ($conn->query($sql) === TRUE) {
echo json_encode(['status' => 'success', 'message' => 'Entry deleted successfully']);
} else {
echo json_encode(['status' => 'error', 'message' => 'Error deleting entry']);
}
$conn->close();
?>
Explanation:
- The JavaScript code now uses
fetchto send a POST request to thedelete_entry.phpfile. - The
delete_entry.phpscript retrieves the ID from the request and executes the SQL query to delete the corresponding entry. - The PHP script sends back a JSON response indicating the success or failure of the deletion.
- The JavaScript code handles the response, showing a success or error message to the user using SweetAlert2.
Additional Considerations:
- Security: Always sanitize user input to prevent SQL injection attacks in the
delete_entry.phpscript. - Error Handling: Implement more robust error handling in both the JavaScript and PHP code to provide informative feedback to the user.
- Server-Side Validation: Consider adding server-side validation in the
delete_entry.phpscript to ensure the ID is valid and prevent unauthorized deletions.
Conclusion:
By utilizing AJAX, we bridge the gap between the client-side JavaScript (SweetAlert2) and the server-side PHP script, enabling the execution of a PHP function upon confirmation. This method is secure, efficient, and ensures a smooth user experience.
