Jquery ajax – How to real time update a form in Laravel

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': "{{ IlluminateSupportFacadesSession::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?