automatically change and can edit unit price in php, ajax - php

Question

If I select item name then automatically change price in unit price text box.
But the problem is if I edit the unit price and change again item name, price not change according to item name. Last edited value of unit price display for every item name. What is the solution for this.
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Item Name</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control select2" class="form-control" onchange="fetch_select(this.value);">
<option selected="selected">Select a Category</option>
<?php
$select = mysqli_query($con, "select ItemName from bincard group by ItemName");
while ($row = $select->fetch_assoc()){
echo "
<option value=".$row['ItemName'].">".$row['ItemName']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Unit Price</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<textarea rows="1" cols="1" style="resize: none;" class="form-control select2"
class="form-control" id="UnitPrice" name="UnitPrice"></textarea>
</div>
</div>
<script type="text/javascript">
function fetch_select(val) {
$.ajax({
type: 'post',
url: 'fetch_data.php',
data: {
get_option: val
},
success: function(response) {
document.getElementById("UnitPrice").innerHTML = response;
}
});
}
</script>
****** fetch_data.php ******
<?php
include ("common/DBCon.php");
if (isset($_POST['get_option']))
{
$ECatagory = $_POST['get_option'];
$find = mysqli_query($con, "select SellingPrice from bincard where ItemName='$ECatagory'");
while ($row = $find->fetch_assoc())
{
echo "" . $row['SellingPrice'] . "";
}
exit;
}
?>

Answer 1

I think you must set id to select box and try:
$(function(){
$("#your select id").change(function(){
fetch_select($(this).val());
});
});