Linking Photo with Drop Down Select

Discussion Ask a question
,
1

Hi Guys,

I want to create a simple on-line check in for customers who come to our chalets. As part of their check in they should be able to order bread. I have a database of all the bread available, along with a picture of it and the price. I want to create a form so they can place order for their bread in advance. Entry fields are number they want to order, a drop down for them to select what they want to order then an image field to show what they have selected and the price of the bread… then click submit and it adds it to their order. We can then display that information on their check in page. Is there a way to link this drop down select with the image from the database? Then carry this all over to their order?

www.monsterchalets.com/check-in

Thanks
Scott

1 Like
2

Hi,
The first step is to connect to dropdown element to the database connection, second step is to turn on “Connect dropdown list items” on the dropdown’s panel.
Then add a “onChange” event to the dropdown
The function should look like this:

export function youtDropdown1_change(event, $w) {
	const indexOfItem = event.target.selectedIndex;
	$w('#yourDataset').getItems(indexOfItem,1)
	.then((results)=> {
		let yourItem = results.items;
		$w('#imageOfBread').src = yourItem.imageOfBread;
		$w('#textOfPriceOfBread').text = yourItem.price;
	});
}

Good luck!
Roi

1 Like
3

Thanks Roi, im new to this, so if i can just get one sample that works for my site then i will be able to understand how it fits together. This is what i have, but it is saying there is an error. Any glaring mistakes?

export function dropdown2_change(event, $w) {
const indexOfItem = event.target.selectedIndex;
$w(‘#Bread.breadPhoto, #Bread.price’).getItems(indexOfItem,1)
.then((results)=> {
let yourItem = results.items;
$w(‘#image8’).src = yourItem.breadPhoto;
$w(‘#text28’).text = yourItem.price;
});
}

4

Hi Scott,
Good work for adapting your elements id to the example.
One more thing you need to do is adapting the object keys to your fields id
Read this thread to manage your field.
Please update your progress.
Roi

5

Thanks Roi, sorry if being dumb, but i have checked and breadPhoto and price are correct field IDs from my database. What am I doing wrong?

6

I don’t know.
Can you please share you site’s url ?
Roi

7

Thank you for taking the time to look Roi.

https://www.monsterchalets.com/copy-of-check-in

8

Hi Scott,
You had some syntax errors.
Check out the comments bellow:

import wixUsers from 'wix-users';

$w.onReady(() => {
	let user = wixUsers.currentUser; // All code regarding wixUser should be warped in $w.onReady
	let userId = user.id; // "r5cme-6fem-485j-djre-4844c49"
	let isLoggedIn = user.loggedIn; // true
	let userRole = user.role; // "Member"
	user.getEmail()
		.then((email) => {
			let userEmail = email; // "user@something.com"
		});
});

export function dropdown2_change(event, $w) {
	const indexOfItem = event.target.selectedIndex;
	$w('#dataset1').getItems(indexOfItem, 1) // you didn't add the name of the dataset element
		.then((results) => {
			let yourItem = results.items; // yourItem is an Array type
			$w('#image8').src = yourItem[0].breadPhoto; // Should be placed in 0 index position
			$w('#text28').text = `$${yourItem[0].price}`; // Text element receives only strings (not numbers like in the database collection)
		});
}

Roi

9

Roy thats excellent thank you! All makes sense apart from how do i know the Data Set which I called “Bread” is labeled dataset1? Where can i find this please? Thanks for all your help!

10

Hi Scott,
Right click on the dataset > “View Properties”> first field is the ID
Roi

11

Hi Roi, could you help me with this code? I dont know hot to tell the dropwon menu, to choose the photo. for example, i want the user to choose the channel he wants in a dropdown list, and i want the logo of the channel to appear in a image next to it, but i cant get to do it with the code. i have the following code:

export function dropdown1_OnChange(event, $w) {
const indexOfItem = event.target.selectedIndex;
$w(‘#dynamicDataset’).getItems(indexOfItem, 1)
.then((results) => {
let yourItem = results.items;
$w(‘#image9’).src = yourItem[0].channelimage;
});
}

my variable on the database are: dropdown menu: channelnumber , image source what should it be?

12

Hi,
The code looks good.
Make sure that yourItem[0].channelimage fit the requirements of the Image.src.
For more information:

Good luck!
Roi.

13

Good day Roi,

I used the code you suggested above to Scott and it worked (I am trying to do the same thing as him). BUT, the image it displays is NOT the same image that is in the same row as the name in the dataset title

This is what I am using. I tried selecting different names and it seems its selecting the images at random.

I only have 2 columns in dataset - Title and Logo

export function dropdown1_change(event, $w) {
const indexOfItem = event.target.selectedIndex;
$w(‘#dataset1’).getItems(indexOfItem,1)
.then((results)=> {
let yourItem = results.items;
$w(‘#image18’).src = yourItem[0].logo;
});

14

I got a question :
How can the dropdown menu send images to database ?

15

Hello
I am trying to use the WIX connect to Data feature on my site, however, I am having trouble understanding how to implement the code you demonstrated. I would like to link a drop down menu item to an image. Can you please help with this.

Thanks,

16

@roi-bendet Hi Roi! Great stuff. How would I following result this add the user’s choice to a compiled order sheet (form submission to database)?

17

This is an old post and will be closed, if you have any related questions please open up a new thread.