Define the selected option with the old input in Laravel / Blade

Preserving the Selected Option with Old Input Using Laravel/Blade

When working on forms in Laravel, you often deal with selecting options from a dropdown list or a multiple select element. Sometimes, your users may fill out the form and face validation issues, causing data loss upon form submission. As a developer, it’s crucial to ensure that users don’t lose their input when encountering errors. In this comprehensive guide, we will explore how to preserve the selected option with the old input using Laravel/Blade without JavaScript.

Step 1: Understand Your Form and Structure

First and foremost, let's look at your current code snippet for the select element:

<select required="required" class="form-control" name="title">
    <option></option>
    @foreach ($titles as $key => $val)
        @if (stristr($key, 'isGroup'))
            <optgroup label="{{ $val }}">
        @else
            <option value="{{ $key }}" selected="{{ (request()->has('title') && request('title') == $key ? 'selected' : '') }}">{{ $val }}</option>
        @endif
    @endforeach
</select>

This code renders a select element with options from the $titles array. If the given option is associated with an “isGroup” key, it creates an optgroup with the label as its value. For all other keys, it adds options to the dropdown.

Step 2: Preserve Selected Option in Case of Validation Errors

To preserve the selected option when validation errors occur and redirect back to the form, you need to make use of the `withInput()` method from Laravel's Redirect class. This method automatically restores all input data with error messages. Here's how you can modify your code:

Redirect::route('xpto')->withInput()->withErrors($v);

However, this solution doesn’t specifically target the selected option within the form element. To make this work for your select input, you need to check if its value is found in the request and add selected attribute when appropriate:

<select required="required" class="form-control" name="title">
    <option></option>
    @foreach ($titles as $key => $val)
        @if (stristr($key, 'isGroup'))
            <optgroup label="{{ $val }}">
        @else
            <option value="{{ $key }}" selected="{{ (request()->has('title') && request('title') == $key ? 'selected' : '') }}">{{ $val }}</option>
        @endif
    @endforeach
</select>

In this case, the code checks if the current query has a value for the ‘title’ input and compares it with the existing values in the dropdown. If there is a match, the “selected” attribute is added to the option, ensuring that the user doesn’t lose their selected choice when redirecting back to the form.

Conclusion

In this blog post, we've reviewed how to preserve the selected options in your Laravel/Blade forms without using JavaScript. We covered essential concepts such as understanding your form and structure, utilizing Laravel's `Redirect` class with `withInput()`, and modifying your select input code to handle validation errors effectively. Applying these techniques will enhance user experience by ensuring data retention in the event of errors or redirects.