How to preserve all the filters in the form after reloading the view in Laravel 5.4?

Question

I have the following form in the view:

<form class="form-inline" method="POST" action="{{route('dsp.report')}}">
@csrf <!-- {{ csrf_field() }} -->
    <div class="col-sm-2 form-group">
        <label>Range one: </label><input type="text" class="form-control" id="date_from" name="date_from" placeholder="Date from range">
    </div>
    <div class="col-sm-2 form-group">
        <label>Range two: </label><input type="text" class="form-control" id="date_to" name="date_to" placeholder="Date to range">
    </div>
    <div class="col-sm-2 form-group">
        <label>Filter by SSP: </label><select name="ssp_id[]" id="ssp" class="form-control-lg select2" multiple="multiple"></select>
    </div>
    <div class="col-sm-2 form-group">
        <label>Filter by DSP: </label><select name="dsp_id[]" id="dsp" class="form-control-lg select2" multiple="multiple"></select>
    </div>
    <div class="col-sm-2 form-group">
            <label>Group by: </label>
            <select class="form-control" name="groupby">
                <option>SSP/DSP</option>
                <option>SSP</option>
                <option>DSP</option>
            </select>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

I want to preserve all the values in this form after controller processed the request and returned data back:

        return view('dsp.index', $data);

How can I do it? Is there any simple solution?

UPD: To make it clear for preserving values (not keys) in select2-based multiple dropdown ajax selects:

First of all, we trigger this controller when we're looking for the SSP term:

public function get_ssp(Request $request) {
    $term = $request->get('term');

    $ssp_list = SspCompanyList::where('ssp_company_name', 'LIKE', '%'. $term['term'] .'%')
        ->get(['ssp_company_id as id', 'ssp_company_name as text']);

    return ['results' => $ssp_list];

}

And then we process chosen ids in the controller after submitting. Select2 has been configured in this way:

    $(document).ready(function() {
        $('#ssp').select2({
            width: '200px',
            minimumInputLength: 3,
            ajax: {
                url: '{{ route("get_ssp") }}',
                dataType: 'json',
                type: "POST",
                quietMillis: 50,
                data: function (term) {
                    return {
                        term: term
                    };
                },
            },
        });
    });

but the problem is that select2 sends only ids in ssp_id[], not key-value items, and it's not possible to recover them from old() function as item names before sending.

UPD2: I'm trying to solve it in this way:

            <select name="ssp_id[]" id="ssp" class="form-control-lg select2" multiple="multiple">
                @if (is_array(old('ssp_id')))
                    @foreach (old('ssp_id') as $ssp_id)
                        {{ $ssp_name = \App\Models\SspCompanyList::select('ssp_company_name')->where('ssp_company_id', $ssp_id)->first()->ssp_company_name }}
                        <option value="{{ $ssp_name }}" selected="selected">{{ $ssp_name }}</option>
                    @endforeach
                @endif
            </select>

and after first reload it works and preserves the ssp names I need, but after second attempt to select values for dsp below on the same page and submit again it returns this error:

Trying to get property 'ssp_company_name' of non-object (View: /home/pavel/projects/dsp/resources/views/dsp/index.blade.php)

So, why first time it's working and second time - not? Should we treat it in the other manner for select2?

Answer 1

NOTE: You forgot to add the value attribute on your select options

For the normal Input Fields, you can pass the old value to it by using Laravel's old('input_name')

For Example:

<input name="input_name" value="{{ old('input_name') }}" />

While your Select Fields need the selected attribute on each option tag.

For example:

<select class="form-control" name="input_name">
    <option {{ old('input_name') == "SSP/DSP" ? 'selected' : '' }} value="SSP/DSP">SSP/DSP</option>
    <option {{ old('input_name') == "SSP" ? 'selected' : '' }} value="SSP">SSP</option>
    <option {{ old('input_name') == "DSP" ? 'selected' : '' }} value="DSP">DSP</option>
</select>

Your code becomes:

<form class="form-inline" method="POST" action="{{route('dsp.report')}}">
    @csrf <!-- {{ csrf_field() }} -->
    <div class="col-sm-2 form-group">
        <label>Range one: </label>
        <input type="text" class="form-control" id="date_from" name="date_from" value="{{ old('date_from') }}" placeholder="Date from range">
    </div>
    <div class="col-sm-2 form-group">
        <label>Range two: </label>
        <input type="text" class="form-control" id="date_to" name="date_to" value="{{ old('date_to') }}" placeholder="Date to range">
    </div>
    <div class="col-sm-2 form-group">
        <label>Filter by SSP: </label>
        <select name="ssp_id[]" id="ssp" class="form-control-lg select2" multiple="multiple"><option></option></select>
    </div>
    <div class="col-sm-2 form-group">
        <label>Filter by DSP: </label>
        <select name="dsp_id[]" id="dsp" class="form-control-lg select2" multiple="multiple"><option></option></select>
    </div>
    <div class="col-sm-2 form-group">
        <label>Group by: </label>
        <select class="form-control" name="groupby">
            <option {{ old('groupby') == "SSP/DSP" ? 'selected' : '' }} value="SSP/DSP">SSP/DSP</option>
            <option {{ old('groupby') == "SSP" ? 'selected' : '' }} value="SSP">SSP</option>
            <option {{ old('groupby') == "DSP" ? 'selected' : '' }} value="DSP">DSP</option>
        </select>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

You can add your select2 selected values this way:

let arrayOfSelectedValues = [] // You can keep your selected values here if you know them already

$('#ssp').select2({
    width: '200px',
    minimumInputLength: 3,
    ajax: {
        url: '{{ route("ssp") }}',
        dataType: 'json',
        type: "POST",
        quietMillis: 50,
        data: function (term) {
            return {
                term: term
            };
        },
    },
}).val(arrayOfSelectedValues).trigger("change"); // Then add the selected values to the select2() initialisation

Answer 2

Add the property value to all inputs like this:

<input type="text" name="username" value="{{ old('username') }}">

Check the docs for better understanding https://laravel.com/docs/5.4/requests#old-input