Dropdown Box & URL Button Linked (Database)

Hi

I’ve got a database called ‘World Countries’ set up like this:

I’ve put a drop down box on my page that looks like this:


I want the ‘go’ button to be the trigger to launch the link in my database.

The dropdown down has been set up like this:


And my ‘go’ button has been set up like this:


However, everytime I click ‘go’. It takes me to the first URL on my Database, not the corresponding URL on the database. How do I change it so it links to the correct one?

Kind regards

I wondering if anyone has spotted this post? It seems like it should be a fairly easy thing to fix. I guessing I’ve just miss-read one of your help pages somewhere?

Kind regards

Thomas

Hey Thomas,

What you’re trying to do is indeed not too difficult, but you’ll need to write some code.

You need to create a onChange event handler for the dropdown that looks something like this:

import wixLocation from 'wix-location';
// the above line must be at the top of your code

// you need to connect this function to your dropdown using the properties panel
export function dropdown_change(event, $w) {
	$w("#dataset1").setCurrentItemIndex(event.target.selectedIndex)
		.then( () => {
			wixLocation.to($w("#dataset1").getCurrentItem().url);
		} );
}

Hi Sam

Thanks for the response.

I’ve attached your code to my drop down and i keep getting the following error messages:

There was an error in your script
TypeError: n is not a function

The dropdown is called ‘dropdown1’ and the dataset is called ‘dataset1’:

import wixLocation from 'wix-location';

export function dropdown1_change(event, $w) {
	$w("#dataset1").setCurrentItemIndex(event.target.selectedIndex)
		.then( () => {
			wixLocation.to($w("#dataset1").getCurrentItem().url);
		} );
}

Any idea what may be wrong?

Kind regards

Thomas

Okay, it’s hard to be sure what’s going on. Did you wire the function correctly using the properties panel? Are there any error messages in the code panel? If so, please attach a screenshot.

Hi Sam

The Link:

The Code & Data Set:

The Error message:

Many thanks again

Thomas

Woah, hold on a second. What’s going on there on the first 317 lines of code? If there is anything up there, and I assume there is, you’ll need to move the import line (318) all the way to the top of your code. Imports need to be the first things that happen in the code.

Also, (my bad) I forgot to mention that you need to change the .url on line 322 to the field key of the column in your collection that contains the URLs. Looks from your screenshots that it might be .links .

Many thanks, Sam!

I just changed it a little so the button click can control it instead of the selection from the dropdown.

export function dropdown1_change(event, $w) {
	$w("#dataset1").setCurrentItemIndex(event.target.selectedIndex)
		
} 
export function button32_click(event, $w) {
        wixLocation.to($w("#dataset1").getCurrentItem().links);

} 

Cheers!

Thomas

Hey Thomas, I’m trying to do the same thing. Does the code work with iPhone X on Safari? I can’t get it to work on that browser without a Go button.

Hi Thomas,
Can you post the full code above where you have the button click controlling it instead of the selection from the dropdown. I can’t seem to make it work and I can really use this function.
Thank you

Hi Jack

The above is the full code to control it.

You need this at the top:

import wixData from 'wix-data';
import wixLocation from 'wix-location'; 

This section selects the current item in your dataset:

  • Change dataset1 with the name of the dataset you are wanting to search through.
export function dropdown1_change(event, $w) {
	$w("#dataset1").setCurrentItemIndex(event.target.selectedIndex)
		
} 

//when you click the item in your dropdown, 
//it selects the corresponding item row in the dataset
//*if you don't do this it will just use the first item in your dataset*

Attach this to the button you want to use as your “Click to Search”:

  • Change dataset1 with the same name as the above dataset.

  • Change links to the column name in your dataset (the one with the URL in it)

export function button32_click(event, $w) {
        wixLocation.to($w("#dataset1").getCurrentItem().links);

} 

//previous code selects the row
//this code selects the URL column
//then opens the browser page to the link you have in the column

Hope it works!

Thomas

Hi Thomas,
Thank you for your help.
I’ve attempted to do this but i’m getting error codes and it’s not working.
The code where I have the drop down controlling works fine and looks like this:


Iv’e entered the code you suggested like this:


It doesn’t work and I receive this error message:


Any help would be greatly appreciated.
Thank you

Hi Jack

Do you have a web link address entered into the column marked pricePage in dataset1?

All the best

Thomas

Hi Thomas,
I did the same code on my website like this,


but when I clicked on the option, it came up the error message


the dataset settings is read & write, is there anything I miss? Thank you.

Hi Efah

What’s the ID number of your data set? The ID number at the top when you have the properties panel displayed?

(The 6th post down in this feed has the example of the properties panel with the ID number at the top)

I think you’ve got the name you’ve given it, instead of the ID number where you’ve written Language Dataset.

$w(" #e nterIDnumber")

All the best

Thomas

Hi Tomas,
I found the dataset ID, it works! Thanks for your help! :slight_smile:

Hi Thomas,
The column marked pricePage is a column with external web addresses.