Dynamicly populate field after getting value from dropdown - php

Question

I have a form that uses a dropdown menu to select an option. After the option is selected I want to get a value form my DB to populate the next field with the correspondent value (in the scenario is to get the square footage of a rental property - but this value can be edited)
This is the field where i have the options:
<div>
<label class="control-label " for="local">Local</label>
<select class="select form-control" id="local" name="local" ><?php echo $lista_fraccoes;?></select>
</div>
after this i have the script to get the data:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('#local').on('change', function(){
var .local = this.value;
$.ajax({
type: "POST",
url: "area_fraccao.php",
data:'local='+local,
success: function(result){
$("#area").value(result);
}
});
});
</script>
And after this i have the field that i want to populate:
<div class="form-group m-2 ">
<label class="control-label " for="area" type="value">Area</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fas fa-ruler-combined"></i>
</i>
</div>
<input class="form-control" id="area" name="area" placeholder="Em m2" type="value" value=""/>
</div>
In the area_fraccao.php file is where i get the correspondent value:
require_once 'config.php';
require_once 'functions.php';
$local = $_GET['local'];
$query_area = "SELECT * FROM TbFraccao WHERE PkFraccao=" . $local;
$result_area = mysqli_query($link, $query_area);
while ($row_area = mysqli_fetch_assoc($result_area)){
$area = $row_area['FraccaoArea'];
echo $area;
};
The solution I'm Using is presenting the following errors in web inspector
The code I'm using is updated matching the given suggestions.

Answer 1

Looking at your code, The code seems Ok. Please make sure that the query has no error by checking if running query was successful, check there is atleast one result and remove the semi-colon after while closing bracket.
if($result_area = mysqli_query($link, $query_area)){//the query is Ok
if(mysqli_num_rows($result_area)>0){//check there is atleast one result
while ($row_area = mysqli_fetch_assoc($result_area)){
$area = $row_area['FraccaoArea'];
echo $area;
}
}
}
else{//you have an error when writing your query
echo 'Wrong query';
}
if that does not help, the problem might be you did not sanitize the data during saving and there are characters from that data that interferes with the query. Show us how you did filtering before saving the data.

Answer 2

Set value of input elements using value method of jQuery
$("#area").value(result);
html() method is used to set innerHTML of elements