Ajax multiple dropdown return value- php mysql - php

Question

i had 4 table like this
Table
And then im going to fill this form
Form
the workflow is, when i select Item Type and Treatment, the price should be filled based on the ServicePrice Table, I can get the Price from ServicePrice, but when I check XHR on network, it shows the value of Price but its data just show for 1st time, I mean when the modal opened, it shows the first data, when the option changed, the Price value keep like the 1st time modal open. so I want whenever the Item Type or Treatment changed, I want to make the price box filled dynamically
here's my form
<tr>
<td>Item Type</td>
<td>
<select name="ItemTypeID" class="form-control" id="ItemType" >
<option selected=""></option>
<?php
$sql2 = mysql_query("select * from itemtype");
while($record = mysql_fetch_array($sql2)){
?>
<option value="<?php echo $record['ID']; ?>" title="<?php echo $record['DefaultSpec']; ?>"> <?php echo $record["Name"]; ?> </option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td>Treatment</td>
<td>
<select name="TreatmentID" class="form-control" id="Treatment">
<?php
$sql2 = mysql_query("select * from treatment");
while($record = mysql_fetch_array($sql2)){
?>
<option value="<?php echo $record['ID']; ?>"> <?php echo $record["Name"]; ?> </option>
<?php } ?>
</select>
</td>
</tr>
and then my ajax
$("#ItemType, #Treatment").change(function(){
var ItemType = $(this).val();
var Treatment = $(this).val();
console.log(Treatment);
console.log(ItemType);
$.ajax({
type: "POST",
dataType: "html",
url: "GetPrice.php",
data: {ItemTypeID: ItemType, TreatmentID: Treatment},
success: function(result){
console.log(result);
$("#Price").val(result);
});
});
my GetPrice.php
<?php include "../Content/connection.php";
$a="SELECT * FROM ServicePrice WHERE ItemtypeID = '".$_POST["ItemTypeID"]."' AND TreatmentID = '".$_POST["TreatmentID"]."'";
$q=mysql_query($a);
while($record=mysql_fetch_array($q)){
echo $record['Price'];
}
?>
EDIT :
im making it like this it give me correct answer but the Price value triggered only if treatment dropdown changed, how can i make it trigger by booth dropdown?
$("#ItemType").change(function(){
var ItemType = $(this).val();
$("#Treatment").change(function(){
var Treatment = $(this).val();

Answer 1

the $(this).val() inside the change event handler will not work to get data for both the fields,
instead fetch the data of ItemType and Treatment individually
$("#ItemType, #Treatment").on('change', function(){
var ItemType = $("#ItemType").val();
var Treatment = $("#Treatment").val();
$.ajax({
type: "POST",
url: "GetPrice.php",
data: {ItemTypeID: ItemType, TreatmentID: Treatment},
success: function(result){
$("#Price").val(result);
}
});
});