Auto-filling input fields from collection drop-down menu

Ask the community
,
1

Hello, I am creating a web app for tracking nutritional info.

In this app, it is necessary that a user logs their food on this page, which is tied to a member-only collection (so each user has their own unique food database)

978×280 17.1 KB

A user might be okay with doing this once, but it is imperative that after they have done this, they can easily select an item they have previously logged from a dropdown menu.

I have implemented this.

980×363 20.1 KB

Unfortunately, only the title field is actually auto-populated, as seen here:

978×301 17 KB

I will say that each input field, as well as the submit button, is tied to the collection data using the point-and-click interface, not with code. I, however, have also attempted to disconnect all data from each field and simply code it, but it didn’t work at all. I can provide that code if necessary, but for now, this is the most functional version of the code, and the version of the code you see from the pictures above.

import wixData from ‘wix-data’ ;

$w . onReady ( function () {
loadDropdownOptions ();
});

function loadDropdownOptions ( ) {
wixData . query ( ‘FoodDB’ )
. find ()
. then (( results ) => {
const options = results . items . map (( item ) => {
return {
label : item . title ,
value : item . title
};
});
$w ( ‘#dropdown1’ ). options = options ;
})
. catch (( error ) => {
console . log ( error );
});
}

export function dropdown1_change ( event ) {
const selectedFood = $w ( ‘#dropdown1’ ). value ;
if ( selectedFood ) {
wixData . query ( ‘FoodDB’ )
. eq ( ‘title’ , selectedFood )
. find ()
. then (( results ) => {
const food = results . items [ 0 ];
$w ( ‘#input1’ ). value = food . title ;
$w ( ‘#input2’ ). value = food . servingSize ;
$w ( ‘#input3’ ). value = food . servingUnit ;
$w ( ‘#input4’ ). value = food . calories ;
$w ( ‘#input5’ ). value = food . fat ;
$w ( ‘#input6’ ). value = food . carbs ;
$w ( ‘#input7’ ). value = food . protein ;
})
. catch (( error ) => {
console . log ( error );
});
} else {
// Clear the input fields if nothing is selected
$w ( ‘#input1’ ). value = ‘’ ;
$w ( ‘#input2’ ). value = ‘’ ;
$w ( ‘#input3’ ). value = ‘’ ;
$w ( ‘#input4’ ). value = ‘’ ;
$w ( ‘#input5’ ). value = ‘’ ;
$w ( ‘#input6’ ). value = ‘’ ;
$w ( ‘#input7’ ). value = ‘’ ;
}
}

I am not sure what is wrong here, as it should work. However, it doesn’t seem to fetch the data and fill the fields. Does anyone have any other ideas? Oh yeah, I have also tried to modify my loadDropdownOptions function to save the data from the database as an array, then modified the dropdown1_change function to use the array to autofill the form fields, but that didn’t work either. I can also share that code if you want. I’m really at a loss here.

2

Take a look here and learn how to generate conditional (cascade) dropdowns.
But the provided code you will find in the following post, can also be used to generate normal dropdowns, and fill those with items, directly from your database.

You will find everything you need to be able to work with dropdowns and generating (populating) them dynamicaly.

3

My dropdowns are populated correctly. My issue is that when I have selected the item from the dropdown, the other fields remain unfilled.

4

Try this one…

import wixData from 'wix-data';

$w.onReady(()=>{
  $w('#dataset1').onReady(()=>{
     $w('#dropdown1').onChange(()=>{
         let selectedFood = String($w('#dropdown1').value);
         console.log("My-selected-food: ", selectedFood);
         if (selectedFood!=="") {
             wixData.query('FoodDB')
             .eq('title', selectedFood)
             .find()
             .then((results) => {
                 let items = results.items
                 const food = results.items[0];
                 console.log(food);
                 $w('#input1').value = food.title;
                 $w('#input2').value = food.servingSize;
                 $w('#input3').value = food.servingUnit;
                 $w('#input4').value = food.calories;
                 $w('#input5').value = food.fat;
                 $w('#input6').value = food.carbs;
                 $w('#input7').value = food.protein;
             })
             .catch((error)=> {console.log(error);});
         } 
         else {
             for (let i=0; i<=6; i++){
                 $w('#input'+i).value = '';
             }
         }
     });
  });
});
5

Yes! This was the answer. Good thinking. Thanks for your help. I’m glad you came across my post.