select option to fetch other inputs

Tags: , ,



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

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);


Source: stackoverflow