Drop down list; select and link to page

Ask the community
, ,
1

Hi everyone!

I’m a newbie to the Wix Code, so hoping you all can help me!

My Goal: Create a drop down menu within my home page that when you select a wix page (on my website), and press a submit or “go here” button, the site redirects you to that page

What I have done thus far:

  • I created a data base simply with two columns: Restaurant Name and the other column was Restaurant URL (which would be the pages I would like the visitor to be redirected to)
  • I added a drop down and I added a button, both linked to the database and to each other
  • When I preview the functionality, and I select one of the restaurants, and the select “submit”, it will ONLY take me to the first web page URL in my database.

What I need help with is when someone drops down the menu, which ever restaurant they choose, and the person clicks the submit button, they get directed to the proper, corresponding page.

2

Hey Dave,

Welcome to WixCode and glad to have you aboard.

You can start with the example Table Index which will show you just about what you need to do. The example uses a table instead of a dropdown, but it’s the same basic principle.

You can then view the video tutorials about dynamic pages for step-by-step instructions.

For more detailed information, look at the articles on dynamic pages .

I hope this helps. Visit again and let us know how it’s going.

Have fun,

Yisrael

3

Thank you so much, but I’m not understanding it. I was hoping to obtain specific direction for my situation. Is there anything I can show to help with that?

4

Please can someone explain?

5

Hello,
I agree with Yisrael that the drop-down is in principal the same as the table, but if this is the case why can it not have the same settings where you can direct the selection to a specific webpage?

As soon as I try to direct it to a dynamic page it always selects the first title from the database even though it is not what I selected in the drop-down.

6

Hi Stephen,

How are you “capturing” the dropdown selection?

A dropdown is not a table, the behavior is different, however you can make it work as a “menu”. You could do something like this:

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

Each value in the dropdown should have its value set to a local page.
Then the onChange() function is used to get the new selection.
Finally, use wix-location.to() to redirect to the “selected” page.

Good luck,

Yisrael

7

Thanks Yisrael. It works.

8

Can someone tell me where on the button script this goes?

9

You can add this to the button’s onClick() event handler, or you can set the Button’s link property . It’s just a matter of what you prefer, or what works better for you.

10

@yisrael-wix I’m just not getting it. I really need help. I have all the pages set up and such I just need to maybe understand the process step by step.

11

@sarahhareon You need a button click event handler. Something like this:

$w("#button1").onClick( (event) => {
  wixLocation.to("<whatever page path that you want here>");
} );

Or in the page’s onReady() you can set the link:

$w("#button1").link = "<whatever page path that you want here>";
12

@yisrael-wix Instead of writing the wixLocation.to (path) function in the “dropdown1” section, what do I change in the “$w(”#button1").link = “”; so that it does the same thing on a button click? I don’t know how to call the “whatever page path that you want here”

13

Hey @brent98401 , see the Button.link API for details.

14

Hello Yisrael…

I am having a dropdown button in the Menu. I have added four dropdown options to it. I want to link every option to a specific page.
Please tell me how to put this in a code and which property to select on the button while putting this code in.
Thanks in advance

15

Dear @yisrael-wix , aside the code, does anything else need consideration when programming the dropdown menu?I’ve been very much windering, sinde my code seems to be fine. But when clicking onto the dropdown menu, no dropdown takes place.
Could you provide me with a hint? Many thanks,
Constantin

import wixLocation from 'wix-location';

//setting up dropdown user menue functionality
$w("#userProfileDropdown").options = [
{"Label": "Open", "value": "edit-user-profile"},
{"Label": "Edit", "value": "userprofiledata/{ID}"},
];
export function userProfileDropdown_change(event)
{
let page = event.target.value; // new page name selected
let path = "/" + page; // create path to local page
wixLocation.to(path);
}
16

padden - my fault ^^. $w(“#…”).options needs to be embedded in $w.onReady( function () {