Example of Submitting a Form using Livewire in Laravel 10

Laravel 10 is the latest version of the popular PHP framework that makes it easy for developers to build web applications. One of the new features introduced in Laravel 10 is Livewire, a library that allows you to build dynamic interfaces in real-time without the need for a full-page refresh.

In this blog, we will explore an example of submitting a form using Livewire in Laravel 10. We will walk you through the steps required to build a simple form and submit it using Livewire.

Step 1: Create a new Laravel Project

To get started, you will need to create a new Laravel project. You can do this using the following command:

laravel new myproject

This command will create a new Laravel project with the name myproject.

Step 2: Install Livewire

Once you have created your Laravel project, you will need to install Livewire. You can do this using the following command:

composer require livewire/livewire

This command will install Livewire and its dependencies in your project.

Step 3: Create a Livewire Component

Next, we need to create a Livewire component that will handle our form submission. You can do this using the following command:

php artisan make:livewire ContactForm

This command will create a new Livewire component called ContactForm. You will find the ContactForm.php file in the app/Http/Livewire directory.

Step 4: Update the Livewire Component

Open the ContactForm.php file and update the render method to return the view that contains our form. In this example, we will create a simple form that contains two fields: name and email.

public function render()
{
    return view('livewire.contact-form');
}

Step 5: Create a Form View

Next, we need to create a view that contains our form. Create a new file called contact-form.blade.php in the resources/views/livewire directory and add the following code:

<div>
    <form wire:submit.prevent="submit">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" wire:model="name">
            @error('name') <span>{{ $message }}</span> @enderror
        </div>

        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" wire:model="email">
            @error('email') <span>{{ $message }}</span> @enderror
        </div>

        <button type="submit">Submit</button>
    </form>
</div>

In this code, we have created a form with two fields: name and email. We have also added wire:model directives to bind these fields to the name and email properties of our Livewire component. Finally, we have added a wire:submit directive that will call the submit method of our component when the form is submitted.

Step 6: Handle Form Submission

Open the ContactForm.php file and add a submit method that will handle the form submission. In this method, we will validate the form data and save it to the database.

public function submit()
{
    $data = $this->validate([
        'name' => 'required',
        'email' => 'required|email',
    ]);

    // Save data to the database

    session()->flash('message', 'Form submitted successfully.');
}

In this code, we have added a submit method that validates the form data using the validate method provided by Laravel. We have specified that the name field is required and the email field must be a valid email address.

After validating the data, we can save it to the database or perform any other actions as required by our application.

Finally, we have added a flash message to indicate that the form was submitted successfully.

Step 7: Display a Success Message

To display the flash message after submitting the form, we need to update our view. Update the contact-form.blade.php file to include the following code:

<div>
    @if (session()->has('message'))
        <div>
            {{ session('message') }}
        </div>
    @endif

    <form wire:submit.prevent="submit">
        <!-- Form fields here -->
    </form>
</div>

This code checks if a flash message has been set in the session and displays it if it exists.

Step 8: Test the Form

With our Livewire component and form view set up, we can now test the form. Start the Laravel development server using the following command:

php artisan serve

Open your web browser and navigate to http://localhost:8000/contact-form. You should see the form we created earlier.

Enter some data into the form fields and click the Submit button. If the data is valid, you should see a success message displayed on the page.

Conclusion

In this blog, we have explored an example of submitting a form using Livewire in Laravel 10. We have walked through the steps required to create a Livewire component, handle form submission, and display a success message.

Livewire provides a powerful way to build dynamic interfaces in real-time, making it a great choice for building modern web applications. With Laravel 10 and Livewire, you can build web applications faster and more efficiently than ever before.