Ajax Form Submit In Laravel 10

6 min read Jul 01, 2024

AJAX Form Submit in Laravel 10

This article will guide you through the process of implementing AJAX form submission in your Laravel 10 application. AJAX, or Asynchronous JavaScript and XML, allows you to submit forms without a full page refresh, providing a more seamless user experience.

Setting up Your Project

Assuming you have a basic Laravel 10 project set up, let's dive into the steps:

Create a Form: Create a simple form in your Blade template. For this example, we'll use a form to create a new post:


    @csrf
    
        Title:
        
    
    
        Content:

Create a Route: Define a route to handle the form submission.

// routes/web.php
Route::post('/posts', [PostController::class, 'store'])->name('posts.store');

Create a Controller: Create a controller called PostController with a store method to process the form data.

// app/Http/Controllers/PostController.php
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Post; 

class PostController extends Controller
{
    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required|string|max:255',
            'content' => 'required|string',
        ]);

        Post::create($request->all());

        return response()->json(['message' => 'Post created successfully!'], 201);
    }
}

Adding AJAX Functionality

Include jQuery: Make sure you have jQuery included in your HTML. You can either use a CDN link or include it in your project.
```
 
```

Write the AJAX Script: Add the following JavaScript code to handle the AJAX submission:

$(document).ready(function() {
    $('#post-form').submit(function(event) {
        event.preventDefault(); // Prevent default form submission

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

        $.ajax({
            url: $(this).attr('action'), // Form action URL
            type: $(this).attr('method'), // Form method
            data: formData,
            dataType: 'json',
            success: function(response) {
                // Handle successful response
                console.log(response.message);
                // Optionally, you can redirect or update the UI here
            },
            error: function(error) {
                // Handle errors
                console.log(error);
            }
        });
    });
});

Explanation

$(document).ready(function() { ... });: This ensures that the script runs after the DOM is loaded.
$('#post-form').submit(function(event) { ... });: Attaches an event handler to the form's submit event.
event.preventDefault();: Stops the default form submission behavior.
var formData = $(this).serialize();: Serializes the form data into a string that can be sent to the server.
$.ajax({ ... });: Performs an AJAX request.
- url: The URL to send the request to.
- type: The HTTP method (POST in this case).
- data: The data to send with the request.
- dataType: The expected data type of the server's response (JSON).
- success: A callback function executed when the request is successful.
- error: A callback function executed when an error occurs.

Additional Considerations

Validation: You can perform client-side validation using JavaScript to enhance the user experience before submitting the form.
Error Handling: Implement comprehensive error handling to provide informative messages to the user in case of server errors.
UI Updates: You can update the UI to reflect the changes after the form is submitted successfully.
Security: Always sanitize user input and validate data on the server-side to protect your application from security vulnerabilities.

By incorporating AJAX form submissions, you can create a more interactive and user-friendly web application with Laravel 10.

Ajax Form Submit In Laravel 10