radio button and values

johnnystephens · July 17, 2021, 5:53am

Please Help > Radio Button Selection Value Populate In Another Field

I thought this would be easier than it has been but it seems I’m not either reading the right How To’s or missing something.

I have a radio button field set with 4 selections. Each selection has a different value. Im trying to get the value to appear in a separate box or field on the form.

EXAMPLE
Drop down
Choice 1 - value 1
Choice 2 - value 2
Choice 3 - value 3
Choice 4 - value 4

The user selects Choice 1, id like the value “1” to then populate in another field or box.

Any suggestuons?
Thank you in advance.

CODE-NINJA · July 17, 2021, 6:25am

First question → so which element you are using now?

I have a radio button field set with 4 selections.

EXAMPLE

Drop down

Choice 1 - value 1

Choice 2 - value 2

Choice 3 - value 3

Choice 4 - value 4

Dropdown
2 or Radio-button ?

For DROPDOWNS you have the following possibilities…

by VALUE —>

let selectedValue = $w("#myDropdown").value; console.log(selectedValue);

by INDEX —>

let selectedIndex = $w("#myDropdown").selectedIndex; console.log(selectedIndex);

Now you have another element, which you want to be populated by the selected value of the dropDown…

$w(‘#myOtherElementForExampleTextBox’).text = selectedValue

johnnystephens · July 17, 2021, 7:52pm

Ninja. Thank you for the quick reply. First, i meant radio buttons, not sure why i typed Drop Down. Second, and i apologize in advance. Where do i cut and paste the code into? I know how to activate/access Developer Mode, but where do i paste the above code into? Thank you again.

CODE-NINJA · July 17, 2021, 9:04pm

You always paste the code onto the page, where your wished ELEMENT is placed at.

If you have your RADIO-BUTTONS on site-A → Than you also place your code for your RADIO-BUTTTONS on site-A.

Yes, you will be able to see the code-section, just if you have activated the DEV-MODE in your Wix-Editor.

But attention, code for RADIO-BUTTONS could look like different than for DropDowns.

All about Radio-Buttons can be found here…
https://www.wix.com/velo/reference/$w/radiobuttongroup

johnnystephens · July 18, 2021, 3:16pm

Like this?
I selected the dropdown element and dragged and dropped that into the screen. I then cut and paste the code that you provided into the code area below.

johnnystephens · July 18, 2021, 3:17pm

I appreciate your help. We are a non profit sports club and i’m trying to set this up to make it easier for the players and parents.

CODE-NINJA · July 18, 2021, 9:46pm

So right now you switched back to dropdowns?
I am confused…

Thank you for the quick reply. First, i meant radio buttons, not sure why i typed Drop Down
But you use DropDown again.

Ok, let’S say you choose the DropDown-way.

You surely will have a DATABASE, where you have located all the informations in.
Now, how to fill/populate the DropDown with the right DATA ?

Let’s say your DATABASE-ID is —> “myDatabase”
And you store all the informations in a separate DATAFIELD -->ID = “myDatafield”

Now you have created a DropDown onto your page.
Navigate to the code-section of the selected page and put in the following code…


import wixData from 'wix-data';

//-------- USER-INTERFACE -------------------------------------------------
var DBFIELDS = []
var txtFieldID = "#text1"                 // <--setting Textfield-ID here...
var DD_ID1 = "#DD1"                       // <--setting Dropdown-ID here...(1st. dropdown)
//var DD_ID2 = "#DD2"                     // <--setting Dropdown-ID here...(2nd. dropdown)

var DATABASE = "YourCollectionIDhere"     // <--setting DATABASE-ID here...
var DBLIMIT = 1000                        // <--setting DATABASE-Limit (max.1000)...

var DBFIELDS[0] = "YourDBFieldID1_here"   // <--setting DATABASE-Field-ID (1st. DB-Field)
//var DBFIELDS[1] = "YourDBFieldID2_here" // <--setting DATABASE-Field-ID (2nd. DB-Field)
//-------- USER-INTERFACE -------------------------------------------------

$w.onReady(()=>{
  //Create-Unique-Dropdown-------------
   wixData.query(DATABASE)
   .limit(DBLIMIT)
   .find()
   .then(results=> {
     create_UniqueDropdown1(results.items);
     create_UniqueDropdown2(results.items);
   }); 
}); 

//---First ACTIVATED-Dropdown...
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};
    });
  }
}
  
//---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[0]]); 
    return [...new Set(titlesOnly)];
  }
  function buildOptions2(uniqueList2) {
    return uniqueList2.map(curr => {
       return {label:curr, value:curr};
    });
  }
}
*/

This should fill your dropdown pulling DATA from your settep-up DATABASE (in the User-Interface-Section of this code).

Normaly this forum is NOT a service-place where you can get code for FREE.
But since you are a novice, i want you to know, that it is not that easy as you perhaps expect to code a good working solution, even if you thinking that it should be an easy task.

Ok, your first step is done and your Dropdown should be automaticaly filled with wished DATA out of your DATABASE, when page is READY!

Now your second step would be to code the ACTIONS, when dropdown-values changes…

Just to keep it as most as possible simple & clear…
-Add a new → “text-field” onto your page → standard-ID → “text1”

Add a new code-line in the USER-INTERFACE-SECTION of your code…

var txtFieldID = "#text1"

Expand your code in the → onReady-Code-Section with the following code-line…

$w(DD_ID1).onChange(()=>{$w(txtFieldID).text = $w(DD_ID1).value;});

Now every change on the dropdown → should be shown in the Text-Field!

Good luck and happy coding!

johnnystephens · July 19, 2021, 4:15am

Ninja. Thank you very much for your time and explainations. I think i’m way over my head and can not figure out what code to change and etc. I’ve cut and paste this into the code section and changed what i believe i needed to change. As you said, i’m very novice and getting into the code side is very new to me. I might need to find another way to do what i’m doing. Thank you very much.

CODE-NINJA · July 19, 2021, 10:22am

@johnnystephens
The following steps are needed, to make the whole thing working…

-setting-up a DATABASE(collection)
-setting-up the implemented User-Interface-Section in the given CODE.
A) set DATABASE-ID
B) set DBFIELD-ID

-creating a Dropdown & giving it the right ID
-creating a textfield & giving it the right ID

And your wished function should work.

Set your Dropdown-ID to → #DD1
Set your Textfield-ID to → #text1
Take a look onto your NEW created DATABASE, find the right column where you have stored the right data and check the ID of this COLUMN–> this will be your → DATAFIELD-ID, which you have to Setup in the integrated User-Interface i your CODE.
-Do the same for the → DATABASE-ID.
Navigate to your NEW created DATABASE (options) take a look on it’s ID. Normaly the ID is the same like you have called your Collection (database).

That means, if you called your DB → “myDB” → then the ID of your NEW created DB should also be -->“myDB”.

Now fill/insert every needed ID into the USER-INTERFACE and into your used elements (dropdown/textfield) and have fun

johnnystephens · July 19, 2021, 1:56pm

Morning Ninja. I’m wondering if the reason i can not get the code to work is because i have not paid fully yet for a site?. I’ve tried a few times to cut and paste the code as suggested and get no result. At this time, all of i have done is design/layout and have not done any payment to purchase a domain or anything. I have messed around a bit and got closer to what i’m aiming for by just using the database and link to the database.

It is at least populate something in the text field when i select something in the dropdown, it just not changing the value when i select another option. Example: If i select AGE 40 the value is the text box does change to 5.

johnnystephens · July 19, 2021, 9:50pm

ok. did everything as suggested. believe i’m still missing something. the text field is not changing with the changing of the drop down.

CODE-NINJA · July 19, 2021, 10:28pm

You are connecting through DATASET → wrong way!
Everything is (should be) done by —> CODE !
Any —> DATASET is needed!

Disconnect —> “#dropdown1” from dataset.
The dropdown will (should) be populated by code.

Replace the the DD-ID in the example with your own Drop-Down-ID…

var DD_ID1 = "#dropdown1"

instead of …

var DD_ID1 = "#DD1"

Also disconnect your texbox → “textBox1” ← from DATASET.
Also the text-box will be filled automaticaly by code.
Also change ID for Text-Box.

var txtFieldID = "textBox1"

You have 2x → DATAFIELDS in your DB —> 1) “AGE” 2) AGE Value
Take a look for their IDs → how are defined their IDs ???

—> “age” ???
—> “ageValue” ???

Now back to your CODE…

import wixData from 'wix-data';

var DBFIELDS = [], ITEMS;

//-------- USER-INTERFACE -------------------------------------------------
var txtFieldID = "#textBox1"
var DD_ID1 = "#dropdown1" 

var DATABASE = "AgeRange" 
var DBLIMIT = 1000 

var DBFIELDS[0] = "age" 
var OUTPUT_FIELD = "ageValue"
//-------- USER-INTERFACE -------------------------------------------------
 
 $w.onReady(async()=>{
   await wixData.query(DATABASE)
   .limit(DBLIMIT).find()
   .then(results=> {
     ITEMS = results.items 
     create_UniqueDropdown1(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};
     });
   }
}

Replace your CODE with this one… test again. (Do not forget to disconnect your DATASET!

Question:

Your Dropdown → gets populated by → “AGE” ?
What do you see in the → Text-Box ?
If nothing works, which ERRORs do you get in —> CONSOLE ?

How to navigate to —> CONSOLE ?
When using → Google-Chrome → Press-F12 and navigate to console.
There you will be able to see all ERROR and some more different type of LOGs.

Show a screenshot of all RED-MARKED ERROR-LOGs.

CODE-NINJA · July 19, 2021, 10:57pm

P.S: And → nope! It has nothing to do, with a payed or not payed wix-site.
The CODE should work on both versions!

Conclusion:

All you have to do right now —> is to setup all given Value-Options in the “User-Interface” right.

Even this is already done for you…

 //-------- USER-INTERFACE -------------------------------------------------
var txtFieldID = "#textBox1"
var DD_ID1 = "#dropdown1" 

var DATABASE = "AgeRange" 
var DBLIMIT = 1000 

var DBFIELDS[0] = "age"       //<--- Check if this ID is right (take a look into your DB)
var OUTPUT_FIELD = "ageValue" //<--- Check if this ID is right (take a look into your DB)
//-------- USER-INTERFACE -------------------------------------------------

CODE-NINJA · July 19, 2021, 11:14pm

UPDATE:
This line has an ERROR… —> delete → “var”

BAD:

var DBFIELDS[0] = "age"

GOOD:

DBFIELDS[0] = "age"

johnnystephens · July 20, 2021, 6:27am

Ninja. Thank you again for your help with all this. It has really opened my eyes up to how hard this really is. I cut and paste the above code and disconnected the data set. Here is the screen shot…

CODE-NINJA · July 20, 2021, 12:23pm

import wixData … —> goes to the very top of the code (1-code-line)!

Did you place the code on Masterpage, or on normal page?

CODE-NINJA · July 20, 2021, 9:46pm

To be more precise, your code should now look like the following…

And the code —> is NOT implemented on the → “masterPage.js” !!!
The code is added to the page, where you have located your 2x elements → 1x Dropdown + 1x TextBox.

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 = "ageValue"    //<--- check if this ID is right in your DATABASE
    DBFIELDS[0] = "age"          //<--- 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_UniqueDropdown1(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};
      });
   }
}

johnnystephens · July 21, 2021, 2:44am

Ninja. We are getting closer i believe, there are less errors appearing. Still not seeing the data from the DB populating in the fields. What am I missing?

CODE-NINJA · July 21, 2021, 3:28am

Yes you are getting closer to the → ENDRESULT!

If it is now your last ERROR, than you have to look at, how are defined your inputs and how are defined your DATAFIELDS in your DB.

Your last ERROR is a → TYPE-ERROR.

STRING or NUMBER ???

A → STRING is → NOT a → NUMBER & vice-versa.

Take a look into your DB …

You have setted-up both DATAFIELDS as → #NUMBER

But your code expects a → STRING. And this causes your ISSUE!

Not sure, but this should be the ERROR-causing line…

$w ( DD_ID1 ). options = buildOptions1 ( uniqueTitles1 );

As you can see here…

The Dropdown-Options are defined as —> STRING.

But → const uniqueTitles1 = getUniqueTitles1 ( items ) → returns → NUMBERs.

Now you have two ways, how to solve it.
The most simple way, would be to change both of your DATAFIELDs-TYPE to → STRING (instead of NUMBER).

Or you change your code… especialy in this code-part…

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};
 });
 }
}

How to change TYPE ?

let STRING = “I am a STRING”

let myString = “5” ← this is also a → STRING (NOT a → NUMBER) !!!
let myNumber = 5 ← this here is a → NUMBER (#Number)

Changing from → NUMBER to → STRING…
let myString = String(myNumber)

Changing from → STRING to → NUMBER…
let myNumber = Number(myString)

Now this will be your first attempt to solve the issue by your own.

After you will have solved the ERROR in line-31 going the → NUMBER-version, you probably will get another ERROR, which could appear in line(25), because of the same situation → trying to insert NUMBER into STRING.

johnnystephens · July 21, 2021, 4:45am

So if i understand the instructions correctly, i want to change this:
$w ( DD_ID1 ). options = buildOptions1 ( uniqueTitles1 );
to this
$w ( DD_ID1 ). options =

I’m not understanding the following:
How to change TYPE ?

let STRING = “I am a STRING”

let myString = “5” ← this is also a → STRING (NOT a → NUMBER) !!!
let myNumber = 5 ← this here is a → NUMBER ( #Number )

Changing from → NUMBER to → STRING…
let myString = String( myNumber )

Changing from → STRING to → NUMBER…
let myNumber = Number( myString )

I do not see STRING anywhere in the code. I’m sorry if i’m frustrating you or not following you and really do appreciate all your help. I’m learning alot as we go.

Topic		Replies	Views
Does anyone know how to make a button drop down list? Ask the community code , question	1	116	July 19, 2021
How do I change options in a dropdown based in another dropdown selected option? Ask the community code , question	2	143	August 25, 2021
Populate dropdown field and pre-select one option for the user Ask the community code , question	5	2425	May 9, 2019
Forms V2 - setFieldValues for dropdown or single choice Ask the community code , wix , wix-forms , question	0	12	January 13, 2025
Multiple value in dropdown Ask the community code , design , question	9	1960	November 20, 2019

radio button and values

Related topics