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.
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>
