How to Submit Form Using Ajax In Laravel 10

Ajax is a popular technique that allows web developers to submit forms without refreshing the page. Laravel 10, the latest version of the PHP framework, offers built-in support for Ajax requests. In this article, we’ll show you how to submit forms using Ajax in Laravel 10.

Step 1: Create the Form

First, let’s create a simple form to submit. We’ll use Laravel’s Blade template engine to create the form. Here’s an example:

<form id="myForm">
    @csrf
    <input type="text" name="name">
    <input type="email" name="email">
    <button type="submit">Submit</button>
</form>

This code creates an HTML form with an id attribute set to "myForm". The @csrf directive adds a CSRF token to the form, which is a security feature to protect against cross-site request forgery attacks.

The form contains two input fields, one for the user’s name and the other for their email address. Each input field has a name attribute, which is used to identify the data when the form is submitted.

The form also includes a submit button, which allows the user to submit the form to the server. When the user clicks the button, the form data is sent to the server using an HTTP POST request.

Step 2: Add the Ajax Script

Next, we need to add some JavaScript code to handle the form submission. We’ll use jQuery to make an Ajax request to the server. Here’s an example:

$('#myForm').submit(function(e) {
    e.preventDefault(); // prevent the form from submitting in the traditional way

    // get the form data
    var formData = $(this).serialize();

    // make the Ajax request
    $.ajax({
        url: '/submit-form',
        type: 'POST',
        data: formData,
        success: function(data) {
            // handle the server response
        },
        error: function(xhr, status, error) {
            // handle errors
        }
    });
});

This code uses jQuery to handle the submission of the form with the id attribute set to "myForm".

The first line sets up an event listener for the submit event of the form using the submit() method. When the user submits the form, the callback function is executed.

The preventDefault() method is called to prevent the form from submitting in the traditional way, which would cause the page to refresh.

Next, the serialize() method is called on the form to convert its data into a format that can be sent to the server as a POST request. The serialized data is stored in the formData variable.

The $.ajax() method is then called to send an Ajax request to the server. The url parameter specifies the server endpoint to send the request to, the type parameter is set to 'POST' to indicate that the request is a POST request, and the data parameter is set to the serialized form data.

The success callback function is called if the request is successful, and the error callback function is called if there is an error.

Inside the success callback function, the server response is passed as a parameter (data). You can handle the response and update the page as needed.

Overall, this code allows you to submit the form using Ajax, without refreshing the page, and handle the response from the server in the client-side JavaScript code.

Step 3: Create the Server Endpoint

Finally, we need to create a server endpoint to handle the form submission. In Laravel, we can create a route and controller method to handle the request. Here’s an example:

// routes/web.php
Route::post('/submit-form', 'FormController@submit');

// app/Http/Controllers/FormController.php
public function submit(Request $request)
{
    // validate the form data
    $validatedData = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|email|max:255',
    ]);

    // process the form data
    // ...

    // return a response
    return response()->json([
        'message' => 'Form submitted successfully!',
    ]);
}

This code defines a route in Laravel for handling an HTTP POST request to the /submit-form URL. The route is associated with the FormController and the submit method inside it.

When a user submits a form using Ajax, the request is sent to this route. The submit() method receives the form data in the $request parameter.

The method then uses Laravel’s validation feature to validate the form data. It checks whether the name field is required, whether it is a string, and whether it has a maximum length of 255 characters. Similarly, it validates the email field, ensuring it is required, an email, and has a maximum length of 255 characters.

If the data passes validation, the method can process it and perform any necessary actions. In this case, the processing is not shown in the code as it is commented out.

Finally, the submit() method returns a JSON response to the client, indicating that the form was submitted successfully. The response contains a message key and its value is “Form submitted successfully!”.

Overall, this code shows how a Laravel controller can handle a form submission using Ajax and perform validation on the data.

Conclusion

Submitting forms using Ajax in Laravel 10 is easy and straightforward. By following these steps, you can create a simple form that submits data to the server without refreshing the page. With Laravel’s built-in support for Ajax requests, you can easily handle the form data on the server and return a response to the client.