select box using AJAX - ajax

Question

I have a select form which has three fields, Location, Estate and Size that populate dynamically using ajax.
When a user selects a town, the estates drop down options appear with respect to the town selected.
When the user clicks on search button, results based on the selection should appear.
According to my code, when I dd the variables $Estate and $Size in my post method, I get the values selected by the user on the form. This is what I want.
However, when I dd $Location, I get the id number instead of the value the user selected on the form.
This is my form :
<form class="form-inline" id="search-bar" action="{{route('post_index')}}" method="post">
{{ csrf_field() }}
<select class="form-control productcategory" name="Location" id="product_cat_id">
<option value="0" disabled="true" selected="true">Town</option>
#foreach($cities as $city)
<option value="{{$city->id}}">{{$city->product_cat_name}}</option>
#endforeach
</select>
<select class="form-control productname" name="Estate">
<option value="0" disabled="true" selected="true">Estate</option>
</select>
<select class="form-control" name="Size">
<option value="0" disabled="true" selected="true">Size</option>
<option value="Bedsitter">Bedsitter</option>
<option value="One Bedroom">One Bedroom</option>
<option value="Two Bedroom">Two Bedroom</option>
<option value="Three Bedroom">Three Bedroom</option>
</select>
<button type="submit" class="btn btn-default">Search</button>
</form>
This is my AJAX code :
<script type="text/javascript">
$(document).ready(function(){
$(document).on('change', '.productcategory', function(){
//console.log("Shit is working");
var new_id=$(this).val();
//console.log(cat_id);
var div=$(this).parent();
var op=" ";
$.ajax({
type:'get',
url:'{!!URL::to('findEstateName')!!}',
data:{'id':new_id},
success:function(data){
//console.log('success');
console.log(data);
//console.log(data.length);
op+='<option value="0" selected disabled>chose estate</option>';
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].Estate+'">'+data[i].Estate+'</option>';
}
div.find('.productname').html(" ");
div.find('.productname').append(op);
},
error:function(){
}
});
});
$(document).on('change','.productname',function (){
var prod_id=$(this).val();
var a=$(this).parent();
console.log(prod_id);
var op="";
});
});
</script>
This is my post method :
public function postIndex(){
//echo "success";
$Location = Input::get('Location');
$Estate = Input::get('Estate');
$Size = Input::get('Size');
$validator= Validator::make(
array(
'Location'=>$Location,
'Estate'=>$Estate,
'Size'=>$Size
),
array(
'Location'=>'required',
'Estate'=>'required',
'Size'=>'required'
)
);
if ($validator->fails()) {
return redirect()->route('home-index')->withErrors($validator);
// echo "fail";
}else{
$houses=DB::table('houses')->where('Location', $Location)->where('Size', $Size)->where('Estate', $Estate)->get();
dd($Location);
//$towns = DB::table('houses')->pluck('Location', 'Location');
//$estates = DB::table('houses')->pluck('Estate', 'Estate');
$cities=ProductCat::all();
$data = [
'house' => $houses,
//'towns' => $towns,
//'estates' => $estates,
'cities' => $cities
];
//dd($data);
if (count($houses)) {
return View('pages.home', $data);
}else{
Session::flash('fail', 'Sorry, no results found...');
return View('pages.home',$data, ['FailMessage' => 'Sorry no results found..'])->withHouse($houses);
}
}
}
What do I need to do so that when I dd $Location, I get the Location name selected by the user?