csrf-token expired before form submit - laravel

Question

8
I have a form and I used {!! csrf_field()!!}
I have 2 select element one is for state and one is for the city
when state select change a ajax send and give new cities
if this ajax request doesn't execute we don't have a problem
but if ajax request send then form submit we give 419 page expired error
this is ajax code
$('#state').change(function () {
var state_id = $(this).val();
$.ajax({
type: 'get',
url: '/panel/selectCitiesByStateId/' + state_id,
data: {'nothing': 'nothing'},
timeout: 25000,
error: function () {
alert('sorry error');
},
success: function (res) {
res = JSON.parse(res);
var entires = Object.entries(res);
var htmlOptionElements = '';
for (var i = 0; i < entires.length; i++) {
var city = entires[i];
htmlOptionElements += '<option value="' + city[1] + '">' + city[0] + "</option>";
}
$('#city_id').html(htmlOptionElements);
}
})
});
this is the form top codes
<form action="{{route('admin.job.update',['job'=>$job->slug])}}"
method="post" enctype="multipart/form-data" id="jobForm">
{!! csrf_field() !!}
{!! method_field('patch') !!}
this is select codes
<div class="col-sm-6">
<label for="" class="control-label">state*</label>
<select name="state_id" id="state" class="form-control">
#foreach($states as $state)
<option value="{{$state->id}}"
#if($state->id==#$job->state_id)
selected
#endif
>{{$state->name}}</option>
#endforeach
</select>
</div>
<div class="col-sm-6">
<label for="" class="control-label">city*</label>
<select name="city_id" id="city_id" class="form-control">
#foreach($job->state->cities as $city)
<option value="{{$city->id}}"
#if(#$job->city->id==$city->id)
selected
#endif
>{{$city->name}}</option>
#endforeach
</select>
</div>

Answer 1

well,
one csrf token can be used once. and csrf token generate by a get request.
when you load the form by a get request, token generated and filled the form csrf field.
when the ajax fired on change of #state, you are sending a get request to the system. that means a new csrf token will be generated.
Thats why when you send the request (You already send get request by ajax), you got 419 error.
You can solve this problem by sending post request to ajax for #state, and disable csrf check for the route.
This May solve Your Problem.