Populate textbox from sql based on other txtboxes values in form - php

Question

I am doing a registration page where the one input textbox should be populated based on 2 other input textboxes.
tblEntries
Id; firstname; lastname; age; gender; categories
tblCategories
Id; categories; age_from; age_to, gender
Data inserted: 1; Veteran_male; 20; 30; male
frmEntries.php is populated with tblEntries data onload already using localstorage.
(may look like this
Firstname=Peter
Lastname=Trump
Age=25
Gender=male
Categories= ?(from sql)
include("conn.php");
include("categories.php");
<input id="firstname" type="text" name="firstname" value="" />
<input id="lastname" type="text" name="lastname" value="" />
<input id="age" type="text" name="age" value="" />
<input id="gender" type="text" name="gender" value="" />
<input id="categories" type="text" name="categories" value="<?php echo $output; ?>" />
(the 25 fall in between 20 and 30 in the tblCategories and the gender is shown in both tables)
categories.php
<php?
include ('conn.php');
$gender = $_POST["gender"];
$age = $_POST["age"];
$result = $con->query("SELECT categories FROM tblCategories WHERE '$age' BETWEEN age_from AND age_to AND gender='$gender'”);
$result = mysqli_query($con, $query);
$output = '';
while($row = mysqli_fetch_array($result))
{
$output = $row["categories"];
}
echo($output);- //(to be populated inside the frmEntries and the
“categories” field onload)
}
?>
Should i use Ajax with a button?
<script>
$('#updateBtn').click(function(e){
//to disable the click from going to next page
e.preventDefault();
$.ajax(
'categories.php', function(data){
$('#categories').val(data);
}
);
});
</script>
Please advise on how to do this. Should I rather use a button to populate "categories" after onload? I get variable not find errors