Fueling Your Coding Mojo

Buckle up, fellow PHP enthusiast! We're loading up the rocket fuel for your coding adventures...

Popular Searches:
52
Q:

javascript - Sweetalert 2 - Post Variable from form AND Sweetalert to PHP?

Hi everyone,

I'm currently working on a project where I need to use Sweetalert 2 to display a confirmation message before submitting a form and also pass a variable from the form to PHP. I have looked through several resources but I haven't found a clear solution for this specific scenario.

Here's what I'm trying to achieve:

I want to display a Sweetalert 2 confirmation box when the user clicks on the submit button of a form. If the user confirms the action, I want to send a specific variable from the form to a PHP script for further processing.

I have already integrated Sweetalert 2 into my project and it works perfectly for displaying simple messages. However, I'm struggling to figure out how to pass the form variable to the PHP script while displaying the Sweetalert 2 pop-up.

I would greatly appreciate if anyone could provide a code example or guide me in the right direction on how to achieve this. Thank you in advance for your help!

Best regards,

[Your Name]

All Replies

kunde.emmanuelle

Hey [Your Name],

I have recently worked on a similar functionality using Sweetalert 2 and passing variables to PHP. Here's how I achieved it:

First, you need to attach an event listener to the form submit button. When the button is clicked, you can use Sweetalert 2 to display a confirmation message. You can achieve this by using the Swal.fire() function and passing the required parameters.

Here's a code snippet to help you understand:

javascript
const form = document.getElementById('myForm');
const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', function(e) {
e.preventDefault();

Swal.fire({
title: 'Are you sure?',
text: 'This action cannot be undone!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, submit!',
preConfirm: () => {
// You can access the form variable value here and perform the necessary actions
const formVariable = document.getElementById('formVariable').value;
// Now you can send the formVariable to your PHP script using AJAX or similar methods
// ... AJAX code here ...
}
}).then((result) => {
if (result.isConfirmed) {
form.submit(); // Submit the form if the user confirms
}
});
});


In this example, assume that you have a form with an input field for the variable you want to pass (`<input id="formVariable" type="text">`). Replace `myForm` and `submitButton` with the correct IDs from your HTML.

When the user clicks "Yes, submit!" in the Sweetalert 2 dialog, the `preConfirm` function is called. You can retrieve the value of the form variable using `document.getElementById().value` and then send it to your PHP script using AJAX or any other preferred method.

Remember to handle this value server-side in your PHP script to retrieve and process it accordingly.

I hope this helps! Let me know if you have any further questions or if there's anything else I can assist you with.

Warm regards,
[User 1]

klarson

Hey there,

I had a similar requirement in one of my projects where I needed to use Sweetalert 2 to display a confirmation message and pass a variable to PHP. Although my solution differs slightly, it might help you achieve what you're looking for.

Instead of using the `preConfirm` function in Sweetalert 2, I opted for a different approach to pass the form variable to PHP. Here's how I did it:

1. Attach an event listener to the form submit button in JavaScript.

javascript
const form = document.getElementById('myForm');
const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', function(e) {
e.preventDefault();

Swal.fire({
title: 'Are you sure?',
text: 'This action cannot be undone!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, submit!',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.isConfirmed) {
const formVariable = document.getElementById('formVariable').value;
// Now you can manually create a hidden input field and assign the formVariable as its value
const hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'formVariable';
hiddenInput.value = formVariable;
form.appendChild(hiddenInput);

form.submit(); // Submit the form including the extra variable
}
});
});


In this approach, when the user clicks "Yes, submit!" in the Sweetalert 2 dialog, we manually create a hidden input field on the fly and assign the form variable as its value. By appending this field to the form before submitting, the variable will be sent alongside the other form data to the PHP script.

On the PHP side, you can access the value of this variable using `$_POST['formVariable']`.

This method worked well for me in handling variable passing from the form to PHP while utilizing Sweetalert 2. I hope you find it helpful for your project as well.

If you have any questions or need further guidance, feel free to ask.

Best regards,
[User 2]

New to LearnPHP.org Community?

Join the community