Using a dropdown box to direct to a URL

jamesmorris01 · June 17, 2020, 2:43pm

@GOS @AV, I am in preview just to show you the code. Feel free to go to the site and test the button it does not work.

givemeawhisky · June 17, 2020, 3:51pm

Just added that options list to test site and it all runs fine on this page.
https://givemeawhisky.wixsite.com/sportsattictest/owncode

import wixLocation from 'wix-location';

$w.onReady(function () {
	$w("#myDropdown").options = [
		{ "label": "View All Sports", "value": "https://shop.sportsattic.co.uk" },
		{ "label": "American Football", "value": "https://shop.sportsattic.co.uk/?category=american-football" },
		{ "label": "Archery", "value": "https://shop.sportsattic.co.uk/?category=archery" },
		{ "label": "Accessories", "value": "https://shop.sportsattic.co.uk/?category=accessories" },
		{ "label": "Basketball", "value": "https://shop.sportsattic.co.uk/?category=basketball" },
		{ "label": "Bikes", "value": "https://shop.sportsattic.co.uk/?category=bikes" },
		{ "label": "Boxing", "value": "https://shop.sportsattic.co.uk/?category=boxing" },
		{ "label": "Boating/Kayaking", "value": "https://shop.sportsattic.co.uk/?category=boating-slash-kayaking" },
		{ "label": "Climbing", "value": "https://shop.sportsattic.co.uk/?category=climbing" },
		{ "label": "Crossfit", "value": "https://shop.sportsattic.co.uk/?category=crossfit" },
		{ "label": "Cricket", "value": "https://shop.sportsattic.co.uk/?category=cricket" },
		{ "label": "Dance", "value": "https://shop.sportsattic.co.uk/?category=dance" },
		{ "label": "Darts", "value": "https://shop.sportsattic.co.uk/?category=darts" },
		{ "label": "Football", "value": "https://shop.sportsattic.co.uk/?category=football" },
		{ "label": "Fishing", "value": "https://shop.sportsattic.co.uk/?category=fishing" },
		{ "label": "Golf", "value": "https://shop.sportsattic.co.uk/?category=golf" },
		{ "label": "Gym Equipment", "value": "https://shop.sportsattic.co.uk/?category=gym-equipment-weights-machines-etc" },
		{ "label": "Hiking/Camping", "value": "https://shop.sportsattic.co.uk/?category=hiking-slash-camping" },
		{ "label": "Hockey (Field)", "value": "https://shop.sportsattic.co.uk/?category=hockey-field" },
		{ "label": "Hockey (Ice)", "value": "https://shop.sportsattic.co.uk/?category=hockey-ice" },
		{ "label": "Horse Riding", "value": "https://shop.sportsattic.co.uk/?category=horse-riding" },
		{ "label": "Judo/Karate", "value": "https://shop.sportsattic.co.uk/?category=judo-slash-karate" },
		{ "label": "Lacrosse", "value": "https://shop.sportsattic.co.uk/?category=lacrosse" },
		{ "label": "MMA", "value": "https://shop.sportsattic.co.uk/?category=mma" },
		{ "label": "Netball", "value": "https://shop.sportsattic.co.uk/?category=netball" },
		{ "label": "Running", "value": "https://shop.sportsattic.co.uk/?category=running" },
		{ "label": "Rugby", "value": "https://shop.sportsattic.co.uk/?category=rugby" },
		{ "label": "Skiing/Snowboarding", "value": "https://shop.sportsattic.co.uk/?category=skiing-slash-snowboarding" },
		{ "label": "Snooker/Pool", "value": "https://shop.sportsattic.co.uk/?category=snooker-slash-pool" },
		{ "label": "Table Tennis", "value": "https://shop.sportsattic.co.uk/?category=table-tennis" },
		{ "label": "Tennis/Squash/Badminton", "value": "https://shop.sportsattic.co.uk/?category=tennis-slash-squash-slash-badminton" },
		{ "label": "Volleyball", "value": "https://shop.sportsattic.co.uk/?category=volleyball" },
		{ "label": "Wrestling", "value": "https://shop.sportsattic.co.uk/?category=wrestling" },
		{ "label": "Other Sports", "value": "https://shop.sportsattic.co.uk/?category=other-sports" }
	];
});

export function myDropdown_change(event) {
	let url = $w('#myDropdown').value;
	wixLocation.to(url);
}

givemeawhisky · June 17, 2020, 3:52pm

Will try in X too.

givemeawhisky · June 17, 2020, 3:59pm

Works fine in X too.
https://givemeawhisky.editorx.io/sportsattictestx

Just make sure that you have any third party extensions in your browser like popup blocker etc turned off or the site whitelisted as this can affect it too.

I just tested the live site and I had to turn off popup blocker for Chrome for it to work after choosing an option on the dropdown, or I could have left it on and whitelisted the site.

Same code used as well.

import wixLocation from 'wix-location';

$w.onReady(function () {
	$w("#myDropdown").options = [
		{ "label": "View All Sports", "value": "https://shop.sportsattic.co.uk" },
		{ "label": "American Football", "value": "https://shop.sportsattic.co.uk/?category=american-football" },
		{ "label": "Archery", "value": "https://shop.sportsattic.co.uk/?category=archery" },
		{ "label": "Accessories", "value": "https://shop.sportsattic.co.uk/?category=accessories" },
		{ "label": "Basketball", "value": "https://shop.sportsattic.co.uk/?category=basketball" },
		{ "label": "Bikes", "value": "https://shop.sportsattic.co.uk/?category=bikes" },
		{ "label": "Boxing", "value": "https://shop.sportsattic.co.uk/?category=boxing" },
		{ "label": "Boating/Kayaking", "value": "https://shop.sportsattic.co.uk/?category=boating-slash-kayaking" },
		{ "label": "Climbing", "value": "https://shop.sportsattic.co.uk/?category=climbing" },
		{ "label": "Crossfit", "value": "https://shop.sportsattic.co.uk/?category=crossfit" },
		{ "label": "Cricket", "value": "https://shop.sportsattic.co.uk/?category=cricket" },
		{ "label": "Dance", "value": "https://shop.sportsattic.co.uk/?category=dance" },
		{ "label": "Darts", "value": "https://shop.sportsattic.co.uk/?category=darts" },
		{ "label": "Football", "value": "https://shop.sportsattic.co.uk/?category=football" },
		{ "label": "Fishing", "value": "https://shop.sportsattic.co.uk/?category=fishing" },
		{ "label": "Golf", "value": "https://shop.sportsattic.co.uk/?category=golf" },
		{ "label": "Gym Equipment", "value": "https://shop.sportsattic.co.uk/?category=gym-equipment-weights-machines-etc" },
		{ "label": "Hiking/Camping", "value": "https://shop.sportsattic.co.uk/?category=hiking-slash-camping" },
		{ "label": "Hockey (Field)", "value": "https://shop.sportsattic.co.uk/?category=hockey-field" },
		{ "label": "Hockey (Ice)", "value": "https://shop.sportsattic.co.uk/?category=hockey-ice" },
		{ "label": "Horse Riding", "value": "https://shop.sportsattic.co.uk/?category=horse-riding" },
		{ "label": "Judo/Karate", "value": "https://shop.sportsattic.co.uk/?category=judo-slash-karate" },
		{ "label": "Lacrosse", "value": "https://shop.sportsattic.co.uk/?category=lacrosse" },
		{ "label": "MMA", "value": "https://shop.sportsattic.co.uk/?category=mma" },
		{ "label": "Netball", "value": "https://shop.sportsattic.co.uk/?category=netball" },
		{ "label": "Running", "value": "https://shop.sportsattic.co.uk/?category=running" },
		{ "label": "Rugby", "value": "https://shop.sportsattic.co.uk/?category=rugby" },
		{ "label": "Skiing/Snowboarding", "value": "https://shop.sportsattic.co.uk/?category=skiing-slash-snowboarding" },
		{ "label": "Snooker/Pool", "value": "https://shop.sportsattic.co.uk/?category=snooker-slash-pool" },
		{ "label": "Table Tennis", "value": "https://shop.sportsattic.co.uk/?category=table-tennis" },
		{ "label": "Tennis/Squash/Badminton", "value": "https://shop.sportsattic.co.uk/?category=tennis-slash-squash-slash-badminton" },
		{ "label": "Volleyball", "value": "https://shop.sportsattic.co.uk/?category=volleyball" },
		{ "label": "Wrestling", "value": "https://shop.sportsattic.co.uk/?category=wrestling" },
		{ "label": "Other Sports", "value": "https://shop.sportsattic.co.uk/?category=other-sports" }
	];
});

export function myDropdown_change(event) {
	let url = $w('#myDropdown').value;
	wixLocation.to(url);
}

givemeawhisky · June 17, 2020, 4:06pm

Also, just in case you haven’t done this and to check too.

As you are using your own coded options, make sure that you have removed the default choices that are setup by default in the dropdown element.

jamesmorris01 · June 17, 2020, 4:45pm

I have removed

jamesmorris01 · June 17, 2020, 4:47pm

To me it suggests it must be something to do with my site?

jamesmorris01 · June 17, 2020, 4:48pm

Are we able to do a goggle meet or somehting?

jamesmorris01 · June 22, 2020, 9:39am

@GOS / AV Digital,

I didnt get anywhere with this. I am going to try and take a different approach (and probably better if it is possible)

Essentially I am trying to search a marketplace of mine on a third party site. This has a search feature. Is there a way to create a search that when a user has typed the keywords they are looking for it directs them there.

For example, on wix I have a user input box, or search box, the user types ‘Football’ This then takes me to the URL+ ’ KEYWORD USER TYPED, IN THIS EXAMPLE ITS FOOTBALL’

The base URL is always the same, Do you know if this is possible?

yisrael-wix · June 22, 2020, 9:54am

Wix is unable to support a search of a 3rd party site. If you wish to redirect, you can use the wixLocation.to() function with query parameters .

jamesmorris01 · June 22, 2020, 9:58am

Thanks, I understand it cant do a third party search , I am not asking it to do that, I am asking it to redirect to a BASEURL + What the user types, I cant figure out the code to make that happen, is there an example?

yisrael-wix · June 22, 2020, 10:08am

Refer to the wixLocation.to() function and query parameters . To get user input, see TextInput .

To learn about programming with Corvid, read the following articles that will help you start working with Corvid:

About Corvid by Wix - what Corvid is and what features it has.
Getting Started with Corvid by Wix - step-by-step tutorial on how to start using Corvid.
Onboarding to Corvid by Wix - introduction to Corvid with short tutorials.

To learn about Javascript programming:

Topic		Replies	Views
Clickable Drop down menu that takes the user to a URL / Code provided Ask the community code , wix , question , technical-talk	10	94	February 2, 2024
[SOLVED] Dropdown list not redirecting to desired URLs Ask the community code , question	2	230	May 8, 2022
URL Redirects & Velo Javascript Ask the community code , wix , question	22	227	January 25, 2025
Change submit button URL depending on dropdown selection Ask the community code , question	13	1518	April 14, 2023
Create code to open product page based on user's selection in dropdown Ask the community code , wix , question	1	78	June 12, 2024

Using a dropdown box to direct to a URL

Related topics