Change submit button URL depending on dropdown selection

Ask the community
,
1

I was following with this thread, but got stuck:
www.wix. com/corvid/forum/community-discussion/redirect-to-a-form-based-on-input

// For full API documentation, including code examples, visit https://wix.to/94BuAAs
import wixLocation from "wix-location";

export function dropdown1_change(event, $w) {

let option = ($w("#dropdown1").value);
if (option === "Microsoft Powerpoint") {
  $w("#button8").link = "www.owheeler. com/about";
  $w("#button8").target = "_blank"; // same window or new window _blank
} else if (option === "Google Slides") {
  $w("#button8").link = "www.owheeler. com/home";
  $w("#button8").target = "_blank"; // same window or new window _blank
}
}

(FYI used placeholder URLs)

2

Hallo Olivia,

do you need something like this…
https://russian-dima.wixsite.com/meinewebsite

3

Yes that’s it! What was your solution?

4

You can see now in the updated version…
https://russian-dima.wixsite.com/meinewebsite

import wixLocation from "wix-location";

$w.onReady(function () {
});

export function button1_click(event) {
    let option = $w("#dropdown1").selectedIndex

    console.log(option)
    if ( option === 0 ) {wixLocation.to("https://www.owheeler.com/about");} 
    else if ( option === 1 )    {wixLocation.to("https://www.owheeler.com/home");}
    else if ( option === 2 )    {wixLocation.to("https://www.ebay.com");}
    else if ( option === 3 )    {wixLocation.to("https://www.amazon.com");}
    else if ( option === 4 )    {wixLocation.to("https://www.wix.com");}
}
5

Thank you so much!! :grinning:Works perfectly.

6

Similar to this, how could this code be written if the drop downs were linked to a dataset and the target was a Dynamic page inside the website?

7

Hello aircooledevolution,

if you use a dynamic page, then you will also have dynamic links (URLs) which changes with selected page, right?

So you URL also has to be dynamic.

for example … (“link-tutorials-title” is a dynamic URL)

 let myURL = $w('#dataset1').getCurrentItem()["link-tutorials-title"]
 
 let contentLink1 = $w('#dataset1').getCurrentItem()["link-tutorials-title"]

498×517 6.9 KB

505×548 23.2 KB

in your case something like this…

import wixLocation from "wix-location";

$w.onReady(function () {
});

export function button1_click(event) {
    let option = $w("#dropdown1").selectedIndex

    if ( option === 0 ) {wixLocation.to(["link-tutorials-title"]);} 
}

An example of this page …(Tutorial-Overview) with its table where you can see all the data loaded from a data-collection, wich is connected with a DATASET.
The 2 corresponding colums in the database you see above in the pics.

https://russian-dima.wixsite.com/meinewebsite/website-navigation

export function table1_rowSelect(event) {
    setTimeout (()=>{
        $w('#dataset1').onReady( () => {
 let currentRowIndex = event.rowIndex
            console.log(currentRowIndex)    
 let URL = $w('#dataset1').getCurrentItem().url
            console.log(URL)
            console.log($w('#dataset1').getCurrentItem().title)
            console.log($w('#dataset1').getCurrentItem().tutorial)
            console.log($w('#dataset1').getCurrentItem().index)
 let myURL = $w('#dataset1').getCurrentItem()["link-tutorials-title"]
 let contentLink1 = $w('#dataset1').getCurrentItem()["link-tutorials-title"]

            console.log(myURL)
            $w('#BTNgo').link = myURL
        } );
    },1)
}

By selecting a row, the current data loads and also the corresponding URL is loaded to the button (“Forum-Post” & “GO”). “BTNgo” gets the dynamic link.

8

@russian-dima thank you very much for the explanation: I really appreciate it.

For completeness and to help both me and others who might have this same question, how would the same function be used for static web pages within 1 website. For example, if you had a drop down linked to a data set (apple, orange, pear, etc.) which linked to a detailed page for each selection (apple) .

9

Have a read of Nayeli (Code Queen) example here.
Use dropdowns to navigate to another page on Wix
https://www.totallycodable.com/example-dropdown-navigation
https://www.totallycodable.com/wix/corvid/use-dropdowns-to-navigate-to-a-different-page

You can also simply add the options for the dropdown to your code itself as here.
https://www.wix.com/corvid/forum/community-discussion/using-a-dropdown-box-to-direct-to-a-url
Redirect users using Dropdowns in Wix Code
https://www.vorbly.com/Vorbly-Code/WIX-CODE-DROPDOWN-OPTIONS-FROM-DATABASE

10

@GOS thank you very much for this information. It is exactly what I was looking for.

11

@russian-dima - Thanks for that… just what I was looking for!

Is there any way to ALSO make the page open [for the “button1_click(event)”] in a NEW window (even better a pop-up window)?

12

Yes this is possible.
But it would work some kind of another way.

Example:

$w("#myElement").link = "http://wix.com";
$w("#myElement").target = "_blank";
13

Thanks a lot, @russian-dima !

Actually, after asking the question here, I ‘hunted’ around a bit - and got together various pieces of code to get the following - which seems to be working…

$w.onReady(function () {
$w("#button1").target = "_blank";

$w("#dropdown1").onChange(event => {

if($w("#dropdown1").value === "0")
{$w("#button1"). link = "https://goo.gl/maps/ov8UmExuANk88eET9";
}
else if($w("#dropdown1").value === "1")
{$w("#button1"). link = "https://goo.gl/maps/Ti5qNVMEbidJ9wYM6";
}
else {
    $w("#button1"). link = "";
}
});
})

I am NOT a ‘coder’ of any kind - just keep groping around in the dark! :yum:

14

If it’s working → then you got it :wink: