Update text field when a dropdown is selected

kevinreilgepaya · November 15, 2018, 5:19pm

Hi,

I have 2 problems

I have a dropdown menu that gets the energy suppliers (developers) from a database which a corresponding price in another column (price). My problem is how can update a textbox with the corresponding price of the selected dropdown value?

Here’s my input fields:

And here’s the database where the values would be referred:

My second problem is, when a user inputs all the field, I want to calculate the user input into a text field that’ll show how much a user has to pay he uses clean energy. Here’s my calculation formula:

Kilowatt usage x price + admin fee (.01 x kilowatt usage) = total price

Here’s sample screenshot of the input fields:

I am new to wix and have very minimal jquery skills, so any detailed would really be appreciated.

Many thanks,
Kev

poolshark314 · November 16, 2018, 2:27am

For #1

You will need 2 copies of that same dataset that connect to your dropdown: 1 that will actually provide the dropdown choices, and the other that does the actual filter, connected to the textbox to update it. If you connect the same dataset to both the dropdown and textbox, it will only work 1 time and then the filter will apply to the dropdown and only provide you with the option you selected first. Click the Connect to Data icon on the textbox and connect it to the price field. Click the Connect to Data icon on the dropdown menu and use the bottom section to display your dropdown items. Then create an onchange action for the dropdown in the properties menu. Your code should look similar to this, replacing:

dropdown_change - the name of your dropdown onchange action
#dropdown - the name of your dropdown
#dataset1 - the name of the dataset connected to your textbox
field - the name of the field in your collection (the field displayed in your dropdown)

export function dropdown_change()
{
let dropdownvalue = $w(‘#dropdown’).value;
$w(‘#dataset1’).setFilter(wixData.filter().eq(“field”, dropdownvalue))
}

kevinreilgepaya · November 16, 2018, 3:45pm

Thank you for the feedback. Trying out your code now.

kevinreilgepaya · November 16, 2018, 3:56pm

Hi I’m getting ‘wixdata’ not defined error.

Here’s the screenshot:

and here’s the code that I added:

export function dropdown4_change(event) {
let dropdownvalue = $w(‘#dropdown4’).value;
$w(‘#dataset8’).setFilter(wixData.filter().eq(“price”, dropdownvalue))
} //Add your code for this event here:

Am I missing something that needs to be defined (text?) in the code?

Thank for your response.

poolshark314 · November 16, 2018, 4:15pm

@kevinreilgepaya Yes sorry the very top of your code page (above the function) should have this:

import wixData from 'wix-data';

kevinreilgepaya · November 16, 2018, 4:27pm

@poolshark314

Hi thanks for the quick reply!

I’ve the code but it seems like my text field is disabled when I preview. Should I add an onchange function to the text field also? I’m sorry Im novice at jquery.

Here’s a screenshot:

Thanks for the help!

poolshark314 · November 16, 2018, 4:27pm

@kevinreilgepaya Just glancing at your screenshot, I don’t think you want “Price” as your field name. It would be the same field name that is listed in your dropdown, because it is trying to make the dropdown equal the field for the corresponding price you want to see

poolshark314 · November 16, 2018, 4:30pm

@kevinreilgepaya Is your price textbox connected to the price field of your dataset8 dataset? That should be all you need to do for it to be updated by the dropdown

kevinreilgepaya · November 16, 2018, 4:41pm

@poolshark314
I have this set as the filter

And this as the database

This is the one that’s connected also to the dropdown, but using a different dataset. With this reference:

Did I do something wrong in my filtering? Thanks for the help man, appreciate it.

kevinreilgepaya · November 16, 2018, 4:43pm

@poolshark314

Yes. Price field text box is connected to dataset 8

poolshark314 · November 16, 2018, 5:00pm

@kevinreilgepaya If all of your data that you want to display is in the one dataset, you shouldn’t need to do a filter that connects to another dataset.

Your price field text box looks correct and shouldn’t need to be modified anymore, but I would consider changing the field type to number since it is a price. If you decide to do that, you may need to reconnect the data in the window you showed.

kevinreilgepaya · November 16, 2018, 5:09pm

@poolshark314 thanks for the reply

I did filters for the first dropdown so that it’ll have minimal coding.

as for ‘dataset 8’ i’ve removed the filter and updated the price field to number. now it’s showing as an error in preview

poolshark314 · November 16, 2018, 6:02pm

@kevinreilgepaya what is the error?

kevinreilgepaya · November 16, 2018, 6:16pm

@poolshark314 Hey man, solved problem number 1 by using code and not datasets with the help of this tutorial:

Here’s a version of my code:

function uniqueDropDown1 (){

    wixData.query("TechList")

        .limit(1000)

      .find()

      .then(results => {

 const uniqueTitles = getUniqueTitles(results.items);

           $w("#dropdown3").options = buildOptions(uniqueTitles);

      });

 function getUniqueTitles(items) {

 const titlesOnly = items.map(item => item.teCh);

 return [...new Set(titlesOnly)];

    }

 function buildOptions(uniqueList) {

 return uniqueList.map(curr => {

 return {label:curr, value:curr};

        });
    }
}

 

export function dropdown3_change(event, $w) {

uniqueDropDown2();

$w("#dropdown8").enable();

}

Thanks for spending time helping me man, owe you a beer or something.

Now on to problem number 2: calculating the price over a given value.

Cheers!
Kev

olivierleruth · November 19, 2018, 12:37pm

Dear Kevin, have exactly the same request. Were you able to solve it? thanks

olivierleruth · November 20, 2018, 7:13am

Dear @poolshark314 , do you know what it would look like if we have two fields condition to display the text? One field would be a text field (#text4) from a dynamic page, the other would be the dropdown (#dropdown3) in the dynamic page.

I believe this cannot work:

export function dropdown3_change(event, $w) {
let dropdownvalue = $w(‘#dropdown3’).value; $w(‘#text4’).text;
$w(‘#dataset1’).setFilter(wixData.filter().eq(“period1”,“entity”, dropdownvalue))
}
thanks a lot in advance!

olivierleruth · November 20, 2018, 7:28am

@poolshark314 could you tell me what it would look like if I had two different fields as conditions to display the text (among which one dropdown whare I removed duplicate entries with the appropriate coding). Both fields are a dropdown (#dorpdown4, period1) and a text field (#text4, entity) in a dynamic page:

i believe this code is not the correct one:

export function dropdown3_change(event, $w) {
let dropdownvalue = $w(‘#dropdown3’).value; $w(‘#text4’).text;
$w(‘#dataset1’).setFilter(wixData.filter().eq(“period1”,“entity”, dropdownvalue))
}
thanks and regards

olivierleruth · November 20, 2018, 9:38am

It seems this work now better: (only remaining a duplicate entries issue for which i opened another thread)

export function dropdown3_change(event, $w) {
let dropdown = $w(‘#dropdown3’).value;
$w(‘#dataset1’).setFilter(wixData.filter()
.eq(‘period1’, dropdown)
.eq(‘entity’,$w(“#text4”).text)
)}

poolshark314 · November 20, 2018, 2:02pm

@olivierleruth I think this video can explain what you are trying to accomplish

kevinreilgepaya · November 20, 2018, 2:48pm

She has the link in her YouTube description. i referred to that code