Fill Text box value after select drop down menu value change

March 4, 2022

Good Morning..
Hello I am new leaner and stuck at point where i want to fill 3 text box data when select value changed in dropdown menu. i able to get 2 values but 3rd value (Customer Type) not able to get.
My Modal Code

   <div class="col-sm-12">
     <div class="form-group">
        <input type="text" class="form-control" id="custid" value="" required="required" >
     </div>
   </div>

   <div class="col-sm-12">
    <div class="form-group">
     <input type="text" class="form-control" id="custname" value="" required="required" >
    </div>
  </div>

 <div class="col-sm-12">
  <div class="form-group">
    <input type="text" class="form-control" id="type" value="" required="required" >
 </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label for="gendertype">Select Customer <span class="validate">*</span> : </label>
    <select class="form-control" name="selectcustomer" id="selectcustomer" onChange="getcustomerid(this);" required="required">
    <option value="">Select Customer</option>
        @foreach($customerdetails as $item)
         <option value="{{ $item->customerID }}" data-type="{{ $item->type }}">{{ $item->customername }}</option>
        @endforeach 
    </select>
</div>

Script Code

  function getcustomerid(element)
                    {
                        
                        var custid      = element.options[element.selectedIndex].value; // get selected option customer ID value
                        var custname    = element.options[element.selectedIndex].text;// get selected option customer Name in Text
                        var type        = element.options[element.selectedIndex.type]// get Customer Type   

                        document.getElementById('custid').value = custid;
                        document.getElementById('custname').value = custname;
                        document.getElementById('type').value = type;
                        
                    }

I am not able to get value of Customer Type in textbox, other 2 values are coming.
Hope i explain my problem correctly and thanks in Advance

>Solution :

We can either use the dataset property to get access to the data attributes or use the .getAttribute() method to select them by specifically typing their names.

You can either use:

var type = element.options[element.selectedIndex].dataset.type // get Customer Type

or:

var type = element.options[element.selectedIndex].getAttribute('data-type') // get Customer Type

to get the data attribute value.