Laravel 11 Ajax Form Submit Tutorial

In Laravel 11, AJAX allows users to send form data to the controller without refreshing the page and jQuery allows validating form data, this process works in the background, allowing the user to view the page while the form is being processed.

Let’s start creating a simple form and submit the form using AJAX without page refresh:

1. Create a Form

First, create a form in your Blade view file (resources/views/ajaxForm.blade.php):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 AJAX Form Submission Example - ItcodStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
    <div class="container mt-5">
        <form id="ajax-form">
            @csrf
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" name="name">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
</html>

2. Create a Route

Define a route to handle the AJAX request in your web.php file, which is in routes folder:

use App\Http\Controllers\AjaxFormController;
use Illuminate\Support\Facades\Route;

Route::get('/ajax-form', [AjaxFormController::class, 'form']);

Route::get('/submit-form'', [AjaxFormController::class, 'submitForm'])->name('submit-form');

3. Create a Controller

Create a controller to handle the form submission logic. Use php artisan make:controller AjaxFormController to create it:

php artisan make:controller AjaxFormController

In your AjaxFormController.php file, create two methods to handle form submission logic:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AjaxFormController extends Controller
{
    public function form(Request $request)
    {
          return view('ajax-form');
    }
    public function submitForm(Request $request)
    {
        // Process the form data (e.g., save to database)
        $name = $request->input('name');

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

4. Implement AJAX Code

Develop JavaScript code to handle the form submission via AJAX and include the CSRF token in the headers to prevent CSRF attacks:

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function () {
        $('#ajax-form').submit(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "{{ route('submit-form') }}",
                data: $('#ajax-form').serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    console.log(response);
                    // Handle success response
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    // Handle error response
                }
            });
        });
    });
</script>

5. Run Application

Use php artisan serve command to start application server:

php artisan serve

Now open browser with http://127.0.0.1:8000/laravel-ajax-form.

That’s it; i hope you like it.

1. Create a Form

2. Create a Route

3. Create a Controller

4. Implement AJAX Code

5. Run Application

Leave a Comment Cancel reply