根据下拉选择在文本框中显示值

Question

I'm trying to show values in the textbox based on select values. For example, If I select a customer name from the select element, then his detail like address, the phone number needs to be dynamically filled in those textboxes

Here is MySQL table

Table Name: Customer

Table Image

MYSQL and PHP

<?php
$select_customer = "select * from customer";
$select_customer_query = mysqli_query($connection, $select_customer); // Customer Data
?>

      <form method="post" action="">
      <div class="form-group">
      <select class="form-control" name="customer_name">
      <option>Customer Name</option>
      <?php while($customer_result = mysqli_fetch_assoc($select_customer_query)) { ?>
      <option><?php echo $customer_result['name']; ?></option>
      <?php } ?>
      </select>
      </div>
      <div class="form-group">
      <input type="text" class="form-control" placeholder="Phone Number">
      </div>
      <div class="form-group">
      <input type="text" class="form-control" placeholder="Website">
      </div>
      </form>

Answer 1

You need to use onChange to get the value when selected value changed

For getting values like phone number and website you can add other values as attribute to option and get then on change

Now when onChange Called you need to get that attribute values from selected option and set them in text boxes using jQuery

  <form method="post" action="">
      <div class="form-group">
      <select class="form-control" name="customer_name">
      <option>Customer Name</option>
      <?php while($customer_result = mysqli_fetch_assoc($select_customer_query)) { ?>
      <option website="<?php echo $customer_result['website']; ?>" phone_number="<?php echo $customer_result['phone_number']; ?>" ><?php echo $customer_result['name']; ?></option>
      <?php } ?>
      </select>
      </div>
      <div class="form-group">
      <input id="phone_number" type="text" class="form-control" placeholder="Phone Number">
      </div>
      <div class="form-group">
      <input id="website" type="text" class="form-control" placeholder="Website">
      </div>
      </form>
<script>
$(document).ready(function () {     
$('select[name="customer_name"]').change(function(){
   var website = $('option:selected', this).attr('website');
   $("#website").val(website);
   var phone_number = $('option:selected', this).attr('phone_number');
   $("#phone_number").val(phone_number);
});
});
</script>

$('select[name="customer_name"]').change(function(){})

here it will detect the change by selecting that element using its name

`

$('option:selected', this).attr('website');

` this will get attribute by name we pass in it like currently website from selected option