Drop down menu used to direct to external URL

Ask the community
,
1

I have created a drop down menu with several items for the user to choose from. Once an item is selected by the user the user should then be automatically directed to a specific URL. I have set each item’s value to the specific http address I would like it to follow. Here is my javascript code that I have pasted as is shown in the code for the page.

import wixLocation from ‘wix-location’;

$w(“#dropdown1”).onChange( (event, $w) => {
let page = event.target.value; // new page name selected
let path = page; // create path to local page
wixLocation.to(path);

});

What am I missing? Your assistance is greatly appreciated. Thank you

2

Basically the code looks OK. Are you getting any error messages in the Developer’s console? What’s happening?

3

I don’t see any error codes. Essentially, when clicking on the selection the page does not forward to the value, http url.

Do I need href code in the value? or opening closing tags in the java?

4

Please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor.

5

www.cansurround.com - the page is www.cansurround.com/menutest

6

There is in fact an error displayed in the Developers console:

1920×422 137 KB

You can take care of this two ways:

Move the declaration of the event handler into the page’s onReady() handler:

import wixLocation from 'wix-location';

$w.onReady(function () {
    $w("#dropdown1").onChange((event, $w) => {
        console.log(event.target.value);
        wixLocation.to(event.target.value);
    });
});

With this method you don’t need to connect the event handler in the properties panel.

… or…

Connect the event handler in the properties panel:

494×960 50.3 KB

And then complete the event handler function. The code will then look like this:

import wixLocation from 'wix-location';

$w.onReady(function () {

});

export function dropdown1_change(event, $w) {
    console.log(event.target.value);
    wixLocation.to(event.target.value);
}

Try one of these two methods.

Good luck,

Yisrael

7

Thank you, Yisrael. I used the first method with success.

8

Hi Yisrael,

I have followed your first example as shown;

$w.onReady(function () {
$w(“#dropdown1”).onChange((event, $w) => {
console.log(event.target.value); //iPhone X
wixLocation.to(“/iphonex”);
});
});
$w.onReady(function () {
$w(“#dropdown1”).onChange((event, $w) => {
console.log(event.target.value); //iPhone XS
wixLocation.to(“/iphonexs”);
});
});

I have written number of codes directly after each other as shown, since I assume this is how you do it. And I got it working. However, when I choose from the drop down menu, it always directs me to the last URL I coded.
I don’t get any error messages. What am I doing wrong?

Your help is much appreciated

Thank you.