How to real time update a form in Laravel

Question

Recently I found myself having to create a page that users can freely fill out, but I am struggling to understand how to make the page capable of saving changes in real-time.

The idea is that every time the user selects an option from a dropdown or types characters in a textarea, the state (the change) should be saved without the need to click a button or anything else.

I have already tried the following code, but I get a 419 error from the console, and the data is not being saved to the database.

HTML:

<table class="table-bordered table-striped table">
    <tr>
        <th>@lang('quickadmin.inspections.fields.inspection-date')</th>
        <td field-key='inspection_date'>
            {!! Form::text('inspection_date', old('inspection_date'), [
                'class' => 'form-control date',
                'placeholder' => '',
                'id' => 'inspection_date',
            ]) !!}
        </td>

    <tr>
        <th>@lang('quickadmin.inspections.fields.execution-date')</th>
        <td field-key='execution_date'>
            {!! Form::text('execution_date', old('execution_date'), [
                'class' => 'form-control date',
                'id' => 'execution_date',
                'placeholder' => '',
            ]) !!}
        </td>

        <th>@lang('quickadmin.inspections.fields.execution-hour')</th>
        <td field-key='execution_time'>
            {!! Form::text('execution_time', old('execution_time'), [
                'class' => 'form-control timepicker',
                'id' => 'execution_time',
                'placeholder' => '',
            ]) !!}
        </td>
    </tr>

    <tr>
        <th>Veicolo</th>
        <td field-key='vehicles' colspan="3">
            {!! Form::select('vehicles[]', $vehicles, old('vehicles'), ['class' => 'form-control select2', 'multiple' => 'multiple', 'id' => 'selectall-methods' ]) !!}
            <p class="help-block"></p>
            @if($errors->has('vehicles'))
                <p class="help-block">
                    {{ $errors->first('vehicles') }}
                </p>
            @endif
        </td>
    </tr>
    
    <tr>
        <th>Trasferta [minuti]</th>
        <td field-key='trip_time' colspan="3">
            {!! Form::text('trip_time', old('trip_time'), [
                'class' => 'form-control',
                'id' => 'trip_time',
                'placeholder' => 'Esempio: 28 [min]',
            ]) !!}
        </td>
    </tr>

    <tr>
        <th>Descrizione dell'intervento</th>
        <td field-key='inspection_note' colspan="3">
            @if ($inspection->inspection_note != null)
                <textarea id="desc" class="form-control" style="width: 100%;resize: none;" rows="5" maxlength="80">{{ $inspection->inspection_note }}</textarea>
            @else
                <textarea id="desc" class="form-control" style="width: 100%;resize: none;" rows="5" placeholder="Descrizione intervento"
                 maxlength="80"></textarea>
            @endif
        </td>
    </tr>
</table>

Javascript:

<script>
    // This code will update the database when the user changes the value of a field
    $(function() {
        $('.form-control').on('change', function() {
            $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': "{{ \Illuminate\Support\Facades\Session::token() }}"
            }
        });

            $.ajax({
                url: '/admin/new_inspections/update/' + {{ $inspection->id }},
                type: 'post',
                data: {
                    inspection_date: $('#inspection_date').val(),
                    inspection_time: $('#inspection_time').val(),
                    inspection_state: $('#inspection_state').find("option:selected").attr('value'),
                    user_code: $('#user_code').find("option:selected").attr('value'),
                    inspection_note: $('textarea#desc').val(),
                    trip_time: $('#trip_time').val(),
                    execution_date: $('#execution_date').val(),
                    execution_hour: $('#execution_time').val(),
                },
                success: function(response) {
                    if (response.success) {
                        console.log('Product updated successfully!');
                    } else {
                        console.log('Error updating product!');
                    }
                }
            });
        });
    });
</script>

Controller update (The code can't even enter it):

public function update(UpdateNewInspectionRequest $request, $id)
{
    $inspection = NewInspection::findOrFail($id);
    $inspection->extra_vehicles()->sync(array_filter((array)$request->input('extra_vehicles')));
    $inspection->update($request->all());
    $inspection->save();

    return back();
}

I don't know if it could be important, but the feature I'm trying to implement was present in an old version of the website on a different host. About 6 months ago, we changed hosts and migrated the site. It's possible that the issue lies in the change of a reference?

Answer 1

If you would like to do real-time updates, then this surely sounds like you need an asynchronous JavaScript solution. Specifically for that, there is the Laravel Package Inertia which allows to build asynchronous JavaScript forms. Specifically see this page of the documentation.

Alternatively, there is also Livewire which allows you do to the same thing using PHP.