AJAX Request not working in Laravel 5.8.33 - php

Question

I am trying to make a dependent select field but When I select the first field Nothing happen to the other field. I think the ajax code is not working because I use an alert in the starting of the function call by ajax and alert didn't appear but still I am not sure what's the problem. What's wrong with my code can anyone help me in solving this problem.
Html code
<form method="POST" action="{{url('search')}}">
#csrf
<div class="input-group col-sm-10 mt-5 offset-sm-1">
<select class="form-control" name="city">
<option value="none">---Choose City---</option>
<?php foreach ($result['city_data'] as $city) {
?>
<option value="<?php echo $city->id;?>"> <?php echo $city->name;?> </option>
<?php } ?>
</select>
<select class="form-control" name="area">
<option>Choose City</option>
</select>
<div class="input-group-append">
<input type="submit" class="btn searchbutton" value="Search" name="search_button">
</div>
</form>
Ajax code
<script type="text/javascript">
$(document).ready(function() {
$('select[name="city"]').on('change', function(e) {
var cityID = $(this).val();
if(cityID) {
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }})
e.preventDefault();
$.ajax({
url: '/myform/ajax/'+cityID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="area"]').empty();
$.each(data, function(key, value) {
$('select[name="area"]').append('<option value="'+ key +'">'+value+'</option>');
});
}
});
}
else{
$('select[name="area"]').empty();
}
});
});
</script>
web.php
Route::get('myform/ajax/{id}','services4uController#myformAjax');
Controller.php
public function myformAjax($id)
{
echo "<script>alert('Code reached to this stage');</script>";
$area = DB::table("area")
->where("id_city",$id)
->lists("name","id");
return json_encode($area);
}