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