Update Text field Based on Dropdown

Discussion Ask a question
,
1

Hi All,
I’m a bit new to using wix code but I offered a friend to help solve this problem.
We have a dropdown that is connected a dataset for it options, what we would like is when the user selects from the dropdown the trip they would like it updates the text box below it to the matching “tripPrice” column that corresponds with the selection from the dropdown.

We have been googling all over searching and implemetning various methods but cant get it to update properly.
Here is the page/form:


And the database:

1239×118 5.65 KB

The dropdown is mapped to the Headline Column (fieldkey = title)
and the text box should return the “Trip Price” (fieldkey = tripPrice) column when they pick the associated trip.

I have tried:

A few others and a few homegrown ideas with no luck… any help would really be appreciated. I know were missing something, probably simple, here.
Thanks

2

Hi,

What you can do is to query your dataset based on the value selected from the dropdown, then get its tripPrice to be displayed. To achieve that, you should use wix-data #Query . EX:

wixData.query("myCollection")
  .eq("title", $w("#dropdown").value)
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      let firstItem = results.items[0]; //see item below
    } else {
      // handle case where no matching items found
    }
  } )
  .catch( (err) => {
    let errorMsg = err;
  } );
   

/*  firstItem is:
 *
 *  {
 *    "_id":          "00002",
 *    "_owner":       "ffdkj9c2-df8g-f9ke-lk98-4kjhfr89keedb",
 *    "_createdDate": "2017-05-24T12:33:18.938Z",
 *    "_updatedDate": "2017-05-24T12:33:18.938Z",
 *    "title":        "TEST TRIP 2",
 *    "tripPrice":   "169.68"
 *  }

P.s: Place the query inside an onChange function for the dropdown

Hope this helps!
Best,

Mustafa

3

Hi Mustafa,

Thanks for the recommendation, iv been trying to make a query work but its not quite working, here is what i have:

export function tripSelection_change(event,$w) {
  wixData.query("tripDatesDataset")
  .eq("title", $w('#tripSelection'))
  .find()
  .then( (results) => {
 if(results.item.length > 0) {
 let firstItem = results.items[0];
      $w('#tripTotal').text = firstItem.tripPrice;
      console.log(results.items);
    } else {
      $w('#tripTotal').text = "0.00";
    }    
    })
  .catch( (err) => {
 let errorMsg = err;
  });
}

No errors, but the value is not updated and there is nothing sent to the console

4

Hi Mustafa!

I have the exact same problem (in my case trying to display delivery costs per country) and still haven´t been able to find a solution… Do you happen to have any updates?
Thanks a lot,

Joanna

5

Check the connection! Have the “Button” the property “onChange” ? Check the IDs ! Is it the same like in your code? Make a “Console.log(“Button clicked”);” first before every query to be sure that it works.
And when you have the Message in the console “Button clicked” then it’s time to go to the next chapter.

6

export function tripSelection_change(event,$w) {
wixData.query(“tripDatesDataset”)
.eq(“title”, $w(‘#tripSelection’).value)
.find()
.then( (results) => {
if (results.item.length > 0) {
let firstItem = results.items[0];
$w(‘#tripTotal’).text = firstItem.tripPrice;
console.log(results.items);
} else {
$w(‘#tripTotal’).text = “0.00”;
}
})
. catch ( (err) => {
let errorMsg = err;
});
}

lets check carefully your code…you missed alot

7

Great , Help