Dynamically Updating Form Fields with Livewire in Laravel

When building dynamic forms in Laravel, Livewire makes it easy to update form fields in real-time based on user interactions without needing to reload the page. In this tutorial, we'll walk through how to create a dynamic form where the options in a dropdown field are updated based on the selection of another field.

Prerequisites

• Basic understanding of Laravel and Livewire

• A Laravel project with Livewire installed

Objective

We'll create a form where the available options in a second dropdown field depend on the selection made in the first dropdown field.

Step 1: Setting Up the Livewire Component

First, let's create a Livewire component to handle our dynamic form.

Component Class

Run the following command to generate a Livewire component:

php artisan make:livewire DynamicForm

Open the newly created DynamicForm.php file and set up the properties and methods to manage the form fields:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class DynamicForm extends Component
{
    public $selectedCategory = null;
    public $subcategories = [];

    public function updatedSelectedCategory($category)
    {
        $this->subcategories = $this->getSubcategories($category);
    }

    public function getSubcategories($category)
    {
        // This is where you'd fetch subcategories from the database or an API based on the category
        $subcategoriesData = [
            'technology' => ['Web Development', 'Mobile Development', 'AI & ML'],
            'business' => ['Marketing', 'Finance', 'Entrepreneurship'],
            'design' => ['Graphic Design', 'UI/UX Design', '3D Modeling']
        ];

        return $subcategoriesData[$category] ?? [];
    }

    public function render()
    {
        return view('livewire.dynamic-form', [
            'categories' => ['technology', 'business', 'design']
        ]);
    }
}

Step 2: Creating the Blade View

Next, create the Blade view for this component in resources/views/livewire/dynamic-form.blade.php.

Blade Template

<div>
    <!-- Category Dropdown -->
    <label for="category">Category:</label>
    <select id="category" wire:model="selectedCategory">
        <option value="">Select a category</option>
        @foreach($categories as $category)
            <option value="{{ $category }}">{{ ucfirst($category) }}</option>
        @endforeach
    </select>

    <!-- Subcategory Dropdown -->
    @if(!empty($subcategories))
        <label for="subcategory" class="mt-4">Subcategory:</label>
        <select id="subcategory">
            <option value="">Select a subcategory</option>
            @foreach($subcategories as $subcategory)
                <option value="{{ $subcategory }}">{{ $subcategory }}</option>
            @endforeach
        </select>
    @endif
</div>

Step 3: Updating the Routes

Ensure your Livewire component is properly routed. Add the following to your web.php file:

use App\Http\Livewire\DynamicForm;

Route::get('/dynamic-form', DynamicForm::class);

Step 4: Testing the Form

Navigate to http://your-app-url/dynamic-form in your browser. You should see a dropdown for categories. When you select a category, the subcategory dropdown should populate with the corresponding options.

Explanation

• Category Selection: The selectedCategory property is bound to the category dropdown. When a category is selected, the updatedSelectedCategory method is triggered.

• Dynamic Subcategory Loading: The updatedSelectedCategory method calls getSubcategories to fetch the corresponding subcategories based on the selected category. The subcategories property is then updated, which dynamically updates the subcategory dropdown in the view.

• Livewire Magic: Livewire automatically listens to the changes in the selectedCategory property and re-renders the relevant parts of the view without a full page reload.

Conclusion

Using Livewire to create dynamic forms is a powerful way to improve user experience by updating form fields in real-time based on user input. This tutorial demonstrated how to set up a dynamic dropdown menu in Laravel using Livewire, but the principles can be applied to any form field.