How to Submit Form in Laravel with Sweetalert2 Confirmation

If you're a web developer working with Laravel, you know how crucial it is to have a reliable form submission process. The ability to submit forms is a fundamental aspect of web development, and it is essential to ensure that your users can easily submit forms with minimal fuss. One of the popular ways to achieve this is by using Sweetalert2.

Sweetalert2 is a JavaScript library that allows you to create beautiful, responsive, and customizable alerts, confirmations, and popups. In this article, we will guide you through the process of implementing form submissions with Sweetalert2 in Laravel.

Prerequisites

Before we dive into the implementation process, here are some things you should have:

• A basic understanding of Laravel and PHP.
• A Laravel project set up and running.
• A basic understanding of HTML, CSS, and JavaScript.
• The Sweetalert2 JavaScript library installed in your project.

With these prerequisites in mind, let's get started.

Step 1: Create a Laravel Form

First, you need to create a form in Laravel. You can do this by creating a new Laravel Blade view or modifying an existing one. Here's a simple example of a form that we can use for this tutorial:

<form method="POST" action="/submit-form">
    @csrf
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"email"</span>&gt;</span>Email<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">required</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

</form>

This form has two fields, "Name" and "Email," and a submit button. It also includes Laravel's CSRF protection using the @csrf directive.

Step 2: Create a Route

Next, you need to create a route that will handle the form submission. You can do this in your Laravel web.php file. Here's an example:

Route::post('/submit-form', function (Illuminate\Http\Request $request) {
// Handle form submission here
});

This route listens to the POST method at the URL /submit-form. It also takes in a Request object as an argument, which we will use to process the form data.

Step 3: Process the Form Data

Now that we have a form and a route, we need to handle the form data. In the example above, we're using the Illuminate\Http\Request object to access the form data. Here's how you can process the form data and display a Sweetalert2 confirmation:

Route::post('/submit-form', function (Illuminate\Http\Request $request) {
// Validate the form data$validatedData = $request->validate([
'name' => 'required|string',
'email' => 'required|email',
]);

<span class="hljs-comment">// Store the form data in the database or send an email// ...</span>

// Show a Sweetalert2 confirmation

return response()->json(['success' => 'Form submitted successfully!']);
});

In this example, we're using Laravel's built-in validation to ensure that the name and email fields are present and in the correct format. If the validation fails, Laravel will automatically redirect the user back to the form with an error message. If the validation passes, we can then store the form data in the database or send an email.

After processing the form data, we return a JSON response with a success key that includes the message we want to display in the Sweetalert2 confirmation.

Step 4: Display the Sweetalert2 Confirmation

Finally, we need to display the Sweetalert2 confirmation. To do this, we'll use JavaScript to listen for the form submission event and display the Sweetalert2 confirmation when the response is successful.

Here's an example of how you can do this with jQuery:

$('form').submit(function(event) {
event.preventDefault();
$.ajax({
url: '/submit-form',
type: 'POST',
data: $(this).serialize(),
dataType: 'json',
success: function(response) {
Swal.fire({
icon: 'success',
title: 'Success!',
text: response.success,
});
},
error: function(xhr) {
Swal.fire({
icon: 'error',
title: 'Error!',
text: 'An error occurred while submitting the form.',
});
}
});
});

In this example, we're using the submit() function to listen for the form submission event. We're preventing the default form submission behavior with event.preventDefault() so that we can handle the submission ourselves using AJAX.

We're then making an AJAX POST request to the /submit-form route with the form data using $.ajax(). We're specifying that we're expecting a JSON response with dataType: 'json'. If the response is successful, we're displaying a Sweetalert2 confirmation with the success message. If there's an error, we're displaying a Sweetalert2 error message.

By following the steps outlined in this article, you can ensure that your users have a seamless form submission experience with beautiful and responsive Sweetalert2 alerts.