How to change a field's value based on dropdown

Ask the community
,
1

My ultimate goal is to update an image field in the database (a color) automatically, depending on the user’s input (a mood).

*I have coding experience, however I haven’t worked with javascript, HTML or corvid before. This was a project for a CS class (an SQL class) that I continued for fun.

I have a database for the mood entries, and a database for different colors (see here the color database).

795×162 17.6 KB

There is a dropdown menu in the mood entry form that has the mood names as options (I manually entered these). Upon submission (though I currently have it set up under the dropdown change event) I would like to query the mood colors database, find the color image corresponding to the mood name, and save it in the mood image field in my mood entry database. This will allow me to display the mood entries in a gallery, with the color image as the thumbnail.

However, after failed attempts at this, I created a test column (text field) in my mood entry database, and instead tried to fill it with the name of the corresponding color. I am still having issues doing this. Here is the code I have tried using:

export function dropdown3_change(event) {
 
    wixData.query("MoodCOlors")
         .eq("moodName",$w("#dropdown3").value)
         .find()
         .then( (results) => {
              let colorName=results.items[0].title

              console.log(results)
 
              $w("#dataset6").setFieldValue("test",results.items[0].title)
 
          })
        .catch( (err) => {
          let errorMsg = err;
        });
}

Ultimately, this is a workaround to wix not allowing images as dropdown options.

Any and all help is appreciated!

https://anestasha.wixsite.com/mentalhub

2

Your code is fine but you’re missing the .save() after you set the field value:
https://www.wix.com/corvid/reference/wix-dataset/dataset/save

3

Am I missing something? This hasn’t worked.

 $w("#dataset6").setFieldValue("test",results.items[0].title);
 $w("#dataset6").save();

Also, will .setFieldValue() work to set an image in the mood entry database that comes from a previously existing separate database (mood colors)?

4

@amsteffens check the console and see what error it logs. + check the collection permission and make sure ,the dataset has “write” permission.

5

Additional to J.D.'s explanations, a little working example.
Is this what you are trying to do ?

https://www.media-junkie.com/dropdown-images

6

@jonatandor35 It doesn’t seem to be giving me an error, however, it points out this line:

1917×165 28.4 KB

console.log(results)
7

@russian-dima Yes this is very similar!

8

@amsteffens

You may need something like this one…

 import wixData from 'wix-data';

var myResults

$w.onReady(function () {
    wixData.query("YOURdatacollectionHERE").find()
    .then( (results) => {
 if(results.items.length > 0) {
             myResults = results.items
        } else {
 // handle case where no matching items found
        }
    } )
    .catch( (err) => {
 let errorMsg = err;
    } );
 
    $w('#dropdown1').onChange(()=>{$w('#image1').src=myResults[$w('#dropdown1').selectedIndex].image})
    $w('#dropdown2').onChange(()=>{$w('#image2').src=myResults[$w('#dropdown2').selectedIndex].image})
    $w('#dropdown3').onChange(()=>{$w('#image3').src=myResults[$w('#dropdown3').selectedIndex].image})
    $w('#dropdown4').onChange(()=>{$w('#image4').src=myResults[$w('#dropdown4').selectedIndex].image})
    $w('#dropdown5').onChange(()=>{$w('#image5').src=myResults[$w('#dropdown5').selectedIndex].image})
    $w('#dropdown6').onChange(()=>{$w('#image6').src=myResults[$w('#dropdown6').selectedIndex].image})
    $w('#dropdown7').onChange(()=>{$w('#image7').src=myResults[$w('#dropdown7').selectedIndex].image})
    $w('#dropdown8').onChange(()=>{$w('#image8').src=myResults[$w('#dropdown8').selectedIndex].image})
});

And here you may learn how to optimize the Button-Event-Function for multiple buttons (CODING-SKILLS-IMPROVEMENT)…
You can also use some LOOP to improve the CODE-STRUCTURE as well.

https://www.media-junkie.com/switch-safe-function

9

@russian-dima I only need them to choose one option from a drop down, and have the image be inserted into the entry table.

10

@jonatandor35 Do you have another suggestion?

11

@amsteffens make sure the permissions to write to the dataset are set.

12

@jonatandor35 I have them all checked and set to read and write.

13

@amsteffens before you set the new value, try to console.log the current item and see what you get.

14

@jonatandor35 With this code, my console returns the correct color name, but when I input a test submission through the website, that color name does not appear in the dataset.

export function dropdown3_change(event) {
 
    wixData.query("MoodCOlors")
         .eq("moodName",$w("#dropdown3").value)
         .find()
         .then((results) => {
 let colorName=results.items[0].title

              console.log(results.items[0].title);
 
              $w("#dataset6").setFieldValue("test",colorName);
              $w("#dataset6").save();
          })

        .catch( (err) => {
 let errorMsg = err;
        });
}

1920×491 52.8 KB

15

@russian-dima Do you have a suggestion?

16

@amsteffens
Perhaps this may help you out…

https://www.wix.com/corvid/reference/wix-dataset/dataset/onbeforesave

$w("#myDataset").onBeforeSave( () => {
  $w("#dataset6").setFieldValue("test",colorName);
  console.log("Continuing save");
});

Also do not forget to sync your databases (Preview & Live)