Fill Text box value after select drop down menu value change-CodePudding

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 >
     <div >
        <input type="text"  id="custid" value="" required="required" >
     </div>
   </div>

   <div >
    <div >
     <input type="text"  id="custname" value="" required="required" >
    </div>
  </div>

 <div >
  <div >
    <input type="text"  id="type" value="" required="required" >
 </div>
</div>

<div >
  <div >
    <label for="gendertype">Select Customer <span >*</span> : </label>
    <select  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

CodePudding user response：

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.