- Try first the easy-way → Change the TYPE of your DATAFIELDS from …
—! 'NUMBER to —> STRING. Take a look, if the CODE already starts working.
First bring your code to work, then you can solve this last ISSUE.
Are you referring to this area:
if so, there is no “STRING” as an option choice in the drop down for FIELD TYPE
Yes.
STRING = TEXT
And you also found the DBFIELD-ID (ageRange)
Ninja! You are a saint! Thank you! It is working perfectly. I cant thank you enough for the education on all this and your patients with my novice questions. Now, my next steps are to build my form around these 2 fields and i should be good to go!
You will have to learn a lot, but your first understandments are already given.
What is the best practice to learn CODING ? → learning by doing & reading post !
And do not forget to like it, if you really liked it 
I enjoyed the challenge of trying to understand, its like a puzzle. So my next puzzle is trying to figure out how to duplicate what we just did to create a 2nd a drop in and text box doing the same thing but with different data. my head tells me to just cut and paste the code below the 1st group of code and change the DB name, DD name and Textbox name, but i tried that and it did not work. I believe my issue might be that the seperator between the 2 different sets of code?
An example of a second implemented dropdown was already made at the first code-examples in this post. Step back and take a look.
i’m getting closer to having my 2nd drop down and text box set up. I was able to figure out the difference between the 1st code and the 2nd code differences that needed changed. Now i’m reading about unique titles as i believe that is where my error is.
Take your time, you will need a lot of it
Ninja. I’ve been working on this for 5 hours plus and can not find out what i’m missing. I got the Databases pointing in the right direction, have the dropdowns showing the data, i just can not get the data/value to populate the “POINT VALUE” for “AGE”. Here is a screenshot and the code that i currently have running, please any suggestions or articles that educate me a little more. Thank you.
import wixData from ‘wix-data’ ;
var DBFIELDS = , ITEMS ;
//-------- USER-INTERFACE -------------------------------------------------
var txtFieldID = “#textBox1”
var DD_ID1 = “#dropdown1”
var DATABASE = “Agerange”
var DBLIMIT = 1000
var OUTPUT_FIELD = “ageRangeValue” //<— check if this ID is right in your DATABASE
DBFIELDS [ 0 ] = “ageRange” //<— check if this ID is right in your DATABASE
//-------- USER-INTERFACE -------------------------------------------------
$w . onReady ( async ()=>{
await wixData . query ( DATABASE )
. limit ( DBLIMIT ). find ()
. then ( results => {
ITEMS = results . items
create_UniqueDropdown 1 ( ITEMS );
});
$w ( DD_ID1 ). onChange (()=>{
let INDEX = $w ( DD_ID1 ). selectedIndex
$w ( txtFieldID ). value = ITEMS [ INDEX ][ OUTPUT_FIELD ];
});
});
function create_UniqueDropdown1 ( items ) {
const uniqueTitles1 = getUniqueTitles1 ( items );
$w ( DD_ID1 ). options = buildOptions1 ( uniqueTitles1 );
function getUniqueTitles1 ( items ) {
const titlesOnly = items . map ( item => item [ DBFIELDS [ 0 ]]);
return [… new Set ( titlesOnly )];
}
function buildOptions1 ( uniqueList1 ) {
return uniqueList1 . map ( curr => {
return { label : curr , value : curr };
});
}
}
//-------- USER-INTERFACE -------------------------------------------------
var txtFieldID = “#textBox2”
var DD_ID1 = “#dropdown5”
var DATABASE = “Skillrange”
var DBLIMIT = 1000
var OUTPUT_FIELD = “skillValue” //<— check if this ID is right in your DATABASE
DBFIELDS [ 0 ] = “skill” //<— check if this ID is right in your DATABASE
//-------- USER-INTERFACE -------------------------------------------------
$w . onReady ( async ()=>{
await wixData . query ( DATABASE )
. limit ( DBLIMIT ). find ()
. then ( results => {
ITEMS = results . items
create_UniqueDropdown 1 ( ITEMS );
});
$w ( DD_ID1 ). onChange (()=>{
let INDEX = $w ( DD_ID1 ). selectedIndex
$w ( txtFieldID ). value = ITEMS [ INDEX ][ OUTPUT_FIELD ];
});
});
function create_UniqueDropdown5 ( items ) {
const uniqueTitles2 = getUniqueTitles2 ( items );
$w ( DD_ID5 ). options = buildOptions2 ( uniqueTitles1 );
function getUniqueTitles2 ( items ) {
const titlesOnly = items . map ( item => item [ DBFIELDS [ 0 ]]);
return [… new Set ( titlesOnly )];
}
function buildOptions2 ( uniqueList1 ) {
return uniqueList1 . map ( curr => {
return { label : curr , value : curr };
});
}
}
-
First question → Why using 2x different DATABASES? Why not all in one?
-
If using 2x-different DATABASES → you will have to make some changes in CODE…
var DATABASE1 = “Agerange”
var DATABASE2 = “Skillrange”
var DATABASE3 = “xxxxx”
var DATABASE4 = “zzzzz” -
Use ALWAYS just → ONE <— —> $w.onReady() in your code. This will prevent inteferences.
Make some thoughts about your DATABASE-STRUCTURE first, before you continue with programming. As already told → DATABASE-STRUCTURE is the most import thing in your PROJECT.
Ninja. Your very right, i have no idea why i’m using 2 databases.
Complete your DATABASE-STRUCTURE, then try again…
In my first given CODE, i already gave some → deactivated predefinitions ← to setup a second dropdown…
var DBFIELDS[0] = "YourDBFieldID1_here" // <--setting DATABASE-Field-ID (1st. DB-Field)
//var DBFIELDS[1] = "YourDBFieldID2_here" // <--setting DATABASE-Field-ID (2nd. DB-Field)
//---Second DEACTIVATED-Dropdown...
function create_UniqueDropdown2(items) {
const uniqueTitles2 = getUniqueTitles2(items);
$w(DD_ID2).options = buildOptions2(uniqueTitles2);
function getUniqueTitles2(items) {
const titlesOnly = items.map(item => item[DBFIELDS[1]]);
return [...new Set(titlesOnly)];
}
function buildOptions2(uniqueList2) {
return uniqueList2.map(curr => {
return {label:curr, value:curr};
});
}
}
Im completely missing something…here is what i have typed in:
import wixData from ‘wix-data’ ;
var DBFIELDS = [], ITEMS ;
//-------- USER-INTERFACE -------------------------------------------------
var txtFieldID = “#textBox1”
var DD_ID1 = “#dropdown1”
var DATABASE = “RegistrationAgeandSkill”
var DBLIMIT = 1000
var OUTPUT_FIELD = “ageValue” //<— check if this ID is right in your DATABASE
DBFIELDS [ 0 ] = “age” //<— check if this ID is right in your DATABASE
DBFIELDS [ 1 ] = “skill”
//-------- USER-INTERFACE -------------------------------------------------
$w . onReady ( async ()=>{
await wixData . query ( DATABASE )
. limit ( DBLIMIT ). find ()
. then ( results => {
ITEMS = results . items
create_UniqueDropdown 1 ( ITEMS );
});
$w ( DD_ID1 ). onChange (()=>{
let INDEX = $w ( DD_ID1 ). selectedIndex
$w ( txtFieldID ). value = ITEMS [ INDEX ][ OUTPUT_FIELD ];
});
});
function create_UniqueDropdown1 ( items ) {
const uniqueTitles1 = getUniqueTitles1 ( items );
$w ( DD_ID1 ). options = buildOptions1 ( uniqueTitles1 );
function getUniqueTitles1 ( items ) {
const titlesOnly = items . map ( item => item [ DBFIELDS [ 0 ]]);
return [… new Set ( titlesOnly )];
}
function buildOptions1 ( uniqueList1 ) {
return uniqueList1 . map ( curr => {
return { label : curr , value : curr };
});
}
}
function create_UniqueDropdown2 ( items ) {
const uniqueTitles2 = getUniqueTitles2 ( items );
$w ( DD_ID2 ). options = buildOptions2 ( uniqueTitles2 );
function getUniqueTitles2 ( items ) {
const titlesOnly = items . map ( item => item [ DBFIELDS [ 1 ]]);
return [… new Set ( titlesOnly )];
}
function buildOptions2 ( uniqueList2 ) {
return uniqueList2 . map ( curr => {
return { label : curr , value : curr };
});
}
}
still getting the same issue…1st Dropdown (#dropdown1) displays 1st column in Database and 1st Textbox (#textBox1) shows the value. In the second Dropdown (#dropdown7) it shows the data from the 1st column of the DB and the 2nd Textbox (#textBox6) does not populate anything. The ID’s are as follows:
DROPDOWN #1 - age
TEXTBOX #1 - ageValue
DROPDOWN #7 - skill
TEXTBOX #6 - skillValue
I appreciate your help, i know that its something small and i can not see to find it. I’ve tried re-duplicating the code you provided by typing it in and can not seem to get that 2nd drop (#dropdown7) in to function with the 2nd text box (#textbox6).
And you are sure that you do not get any ERRORs in – > CONSOLE ?
Did you check the CONSOLE ?
You have expanded your code and added…
DBFIELDS[0]= "age"
DBFIELDS[1]= "skill"
Good!
But where is setted-up your second dropdown in your code?
I can see the set-up only for dropdown1…
var DD_ID1 = "#dropdown1"
Where is the same for dropdown2?
Where is the event-handler for dropdown2 ?
$w(DD_ID1).onChange(()=>{
let INDEX = $w(DD_ID1).selectedIndex
$w(txtFieldID).value = ITEMS[INDEX[OUTPUT_FIELD];});
});
Which will be the second OUTPUTFIELD ? Did you already defined it?
You are still missing a lot in your code, to make it work.
Please take one more time a closer look, how all the code is working for dropdown1.
Try to understand every single step, than you will be able to dublicate the function for dropdown2.
And jus one more tip. DO NOT USE ALL-CAPS like me.
Normaly it is not wanted to use UPPER-CASE-CODING, like i do it (it’s just my STYLE)
I AM A BAD ROLE MODEL 
How to setup your variables the best way?
—> Using some short abravations to describe your element.
—> Not using ALL-CAPs.
—> Always trying to define variables and constants as short as possible.
—> Seting-up variables and constans in a systematic way.
But this are just tips, of my own expirience. You do not have to follow them, if you think that you have found a better way of how to do it.
Every coder/developer has his own coding-style.
Ninja, You’ve been a great example to me, patient and understanding. Ok, so do i add the 2nd dropdown code under the 1st dropdown code and same for the 2nd textbox?:
//-------- USER-INTERFACE -------------------------------------------------
var txtFieldID = “#textBox1”
var txtFieldID = “#textBox6”
var DD_ID1 = “#dropdown1”
var DD_ID2 = “#dropdown2”
var DATABASE = “RegistrationAgeandSkill”
var DBLIMIT = 1000
var OUTPUT_FIELD = “ageValue” //<— check if this ID is right in your DATABASE
DBFIELDS [ 0 ] = “age” //<— check if this ID is right in your DATABASE
DBFIELDS [ 1 ] = “skill”
Now you get understanding more and more.
Just thinking the locgical way.
You first have to define some code, before you can use it.
First → define a variable → then use it.
First define a constant → then use it.
First define your → dropdown-element → then use it.
…and so on…
- defining → Text-Fields…
var txtFieldID1= "#textBox1"
var txtFieldID2= "#textBox6"
- defining dropdowns…
var DD_ID1 = "#dropdown1"
var DD_ID2 = "#dropdown2"
//var DD_ID3 = "#dropdown3"
//var DD_ID4 = "#dropdown4"
//var DD_ID5 = "#dropdown5"
- defining database-fields…
DBFIELDS[0]= "age"
DBFIELDS[1]= "skill"
- defining —> OUTPUT-FIELDS…(something missing here???)
var OUTPUT_FIELD1 = "ageValue" //<--- check if this ID is right in your DATABASE
Now you can start to use it, when everything is defined well…
$w(DD_ID2).onChange(()=>{
let INDEX = $w(DD_ID2).selectedIndex
$w(txtFieldID2).value = ITEMS[INDEX[OUTPUT_FIELD2];
});
As you can see, you will have to make a little re-modification of your old code.
I am slowly starting to understand but think i might be overthinking this…here is the new revised code:
import wixData from ‘wix-data’ ;
var DBFIELDS = [], ITEMS ;
//-------- USER-INTERFACE -------------------------------------------------
var txtFieldID1 = “#textBox1”
var txtFieldID2 = “#textBox6”
var DD_ID1 = “#dropdown1”
var DD_ID2 = “#dropdown2”
var DATABASE = “RegistrationAgeandSkill”
var DBLIMIT = 1000
var OUTPUT_FIELD1 = “ageValue”
var OUTPUT_FIELD2 = “skillValue”
DBFIELDS [ 0 ] = “age”
DBFIELDS [ 1 ] = “skill”
//-------- USER-INTERFACE -------------------------------------------------
$w . onReady ( async ()=>{
await wixData . query ( DATABASE )
. limit ( DBLIMIT ). find ()
. then ( results => {
ITEMS = results . items
create_UniqueDropdown 1 ( ITEMS );
});
$w ( DD_ID1 ). onChange (()=>{
let INDEX = $w ( DD_ID1 ). selectedIndex
$w ( txtFieldID1 ). value = ITEMS [ INDEX ][ OUTPUT_FIELD1 ];
});
});
function create_UniqueDropdown1 ( items ) {
const uniqueTitles1 = getUniqueTitles1 ( items );
$w ( DD_ID1 ). options = buildOptions1 ( uniqueTitles1 );
function getUniqueTitles1 ( items ) {
const titlesOnly = items . map ( item => item [ DBFIELDS [ 0 ]]);
return [… new Set ( titlesOnly )];
}
function buildOptions1 ( uniqueList1 ) {
return uniqueList1 . map ( curr => {
return { label : curr , value : curr };
});
}
}
if i understand correctly, i now need to write code for the 2nd DD to function, correct?. Here is the code that i have from our early conversations:
function create_UniqueDropdown2(items) {
const uniqueTitles2 = getUniqueTitles2(items);
$w(DD_ID2).options = buildOptions2(uniqueTitles2);
function getUniqueTitles2(items) {
const titlesOnly = items.map(item => item[DBFIELDS[0]]);
return [… new Set(titlesOnly)];
}
function buildOptions2(uniqueList2) {
return uniqueList2.map(curr => {
return {label:curr, value:curr};
});
}
}
I would just need to change the DD ID’s and DBFIELDS to match everything for the 2nd drop down data tied to the DB, correct?