Pre Populated text box(es) based on customer selection in dropdown list - xmpie-users/uStore-js GitHub Wiki

If you want to have a drop down list that shows values from a MS SQL table, and if selecting one value (such as the email address) it automatically fills the text input fields of uStore with the corresponding values from the MS SQL Table, please use the following how to:
Example:
Animation of the result


See a video explaining how it works on YouTube: https://youtu.be/nx4BZ9u4rMQ

  1. Add your data to a MS SQL database table.

  2. Add the database as a datasource in uStore admin

  3. Add all needed dials in the customization wizard (eg: firstname, lastname, housenumber)
    3a. For every child value we need a variable placeholder dial (eg: var-firstname, var-lastname, var-housenumber)
    3b. We also need a variable to hold our JavaScript (eg: var-javascript)

  1. Open the product in the uStore frontend and write down the ids of the child dropdown list and the text field the value needs to be put into

Javascript for the HTML Generic window:

<script type="text/javascript">
window.onload = function() {
//Definition of the parent drop down list id without #
var ParentDD = 'ctl00_cphMainContent_ucDialCustomization_Duc12658_DropDownList';

//First value is the dropdown list id and the second value is the id of the visible text box
var ChildDD = [
['ctl00_cphMainContent_ucDialCustomization_Duc12669_DropDownList','ctl00_cphMainContent_ucDialCustomization_Duc12660_StringTextBox'],
['ctl00_cphMainContent_ucDialCustomization_Duc12668_DropDownList','ctl00_cphMainContent_ucDialCustomization_Duc12661_StringTextBox'],
['ctl00_cphMainContent_ucDialCustomization_Duc12665_DropDownList','ctl00_cphMainContent_ucDialCustomization_Duc12662_StringTextBox'],
['ctl00_cphMainContent_ucDialCustomization_Duc12666_DropDownList','ctl00_cphMainContent_ucDialCustomization_Duc12663_StringTextBox'],
['ctl00_cphMainContent_ucDialCustomization_Duc12667_DropDownList','ctl00_cphMainContent_ucDialCustomization_Duc12664_StringTextBox']
];

//javascript: console.log('Amount of values found : ' + ChildDD.length); // 1
var ParentDDElement = document.getElementById(ParentDD);

//Parent Dropdownlist where the customer selects a value
ParentDDElement.addEventListener('change', function() 
{
	//output of the selected users email address
	//Javascript: console.log(this.value);
	//text that was selected as parent value that should be used everywhere
	const SelectedParentValue = this.value;
	for (var i = 0; i < ChildDD.length; i++) {
		// Iterate over numeric indexes from 0 to 5, as everyone expects.
		//console.log(ChildDD[i][0]);
		
		//Child dropdown list that is made hidden
		const dd = document.getElementById (ChildDD[i][0]);
		
		//Letting the Childbox select the same value as the Parent dropdown list
		dd.selectedIndex = ParentDDElement.selectedIndex; //Selecting by Index of ParentDD and using the same value for all other DD
		
		//writing the value of the hidden dd value into a variable
		var ValueFromHiddenDD = dd.value;
		
		//setting the visible text box to the fetched value of the hidden dropdown list
		document.getElementById(ChildDD[i][1]).value = ValueFromHiddenDD ;
		//javascript: console.log('Output value' + ValueFromHiddenDD );			
	}	
}, false);
}
</script>
⚠️ **GitHub.com Fallback** ⚠️