select option to fetch other inputs - php

Question

What Im trying to do is select item name where is ID and if item selected it automatically adds that item serial number to serial number input.
I think it should be used ajax maybe but I dont know how exactly.
Item Name:<br />
<div class="select-holder">
<i class="fa fa-caret-down"></i>
<?php
if($_items->count_items() == 0)
echo '<select name="item-name" disabled><option value="no">You need to add a item first</option></select>';
else{
echo '<select name="item-name" id="change-item">';
$items = $_items->get_items_dropdown();
while($item = $items->fetch_object()) {
echo "<option value=\"{$item->id}\">{$item->name} - {$item->serialnumber}</option>";
}
echo '</select>';
}
?>
</div>
Serial Number:<br />
<div class="ni-cont">
<input type="text" name="item-serialnumber" class="ni" disabled/>
</div>
I have also other inputs like description, price and etc.. to fetch these inputs with these values.
example: i need get data to my field from select option id (value)
<input type="text" name="item-serialnumber" value="<?php echo $_items->get_item_serialnumber($id); ?>" class="ni" disabled/>
<input type="text" name="item-serialnumber" value="<?php echo $_items->get_item_description($id); ?>" class="ni" disabled/>

Answer 1

That value is already shown inside your select-box you can simply use onchange event and then use $(this).find("option:selected").text().split('-')[1] this will give serial no then put it inside your input-box using $('[name=item-serialnumber]').val(somevalue) .Also ,you can send id via ajax to your server page and fetch result.
Demo Code :
$("#change-item").on("change", function() {
var value = $(this).find("option:selected").text().trim().split('-')[1]
$("[name='item-serialnumber']").val(value)
var id = $(this).val();
//use ajax :
$.ajax({
url: "somepgaename.php", //the page containing php script
type: "post", //request type,
dataType: 'json',
data: {
id: id //send id as well
},
success: function(data) {
console.log(data.yourfieldname);
//put inside your input fields values like :
// $("[name='item-serialnumber']").val(data.serialno)
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Item Name:<br />
<div class="select-holder">
<i class="fa fa-caret-down"></i>
<select name="item-name" id="change-item">
<option value="1">Abc-123</option>
<option value="2">Abc2-122</option>
<option value="3">Abc2-132</option>
</select>
</div>
Serial Number:<br />
<div class="ni-cont">
<input type="text" name="item-serialnumber" class="ni" disabled/>
</div>
Then , at your server end get the id pass via ajax using $_POST['id'] then fetch result using select query and send them back to ajax using echo json_encode($somearray); i.e:
$id = $_POST['id'];
$stmt = $pdo->prepare("SELECT * FROM tablename WHERE id=:id");
$stmt->execute(['id' => $id]);
//put fetch result inside array..send back to ajax
//echo json_encode($somevalue);