Dynamically Updating Form Fields with Livewire in Laravel

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.