Autofill textbox from database based on change of dropdown list value

Question

My jsp page has a select box with all userIds. And I have two text boxes for username and Data of birth. I want to autofill the textboxes when I select a userid from dropdown list.

I have a separate Servlet class and Database class for querying.

How to automatically the textboxes when I select userid from dropdown ? And i want this textboxes to be not editable. Can someone provide me example code.

Answer 1

This JS Fiddle showing how to implement it:

 var $select = document.getElementById('slct'), $un = document.getElementById('un'), $dob = document.getElementById('dob'), val, arr, username, dob; // usually this array is obtained from a server response arr = [ usr1 = ['user1', 'dob1'], usr2 = ['user2', 'dob2'], usr3 = ['user3', 'dob3'], usr4 = ['user4', 'dob4'] ]; $select.addEventListener('change', function(){ val = this.value - 1; // because arrays start at 0. username = arr[val][0]; dob = arr[val][1]; $un.value = username; $dob.value = dob; }); 

 <select id="slct"> <option></option> <option value="1">id 1</option> <option value="2">id 2</option> <option value="3">id 3</option> <option value="4">id 4</option> </select> <input type="text" id="un" disabled> <input type="text" id="dob" disabled>