# Change submit button URL depending on dropdown selection

**URL:** <https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [June 22, 2020, 1:32am UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903 "2020-06-22T01:32:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![olivia](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/olivia/32/3202_2.png) [@olivia](https://forum.wixstudio.com/u/olivia)\
**Post date:** [June 22, 2020, 1:32am UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/1 "2020-06-22T01:32:32Z")

</div>

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

```javascript
// 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)

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 22, 2020, 10:44am UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/2 "2020-06-22T10:44:16Z")

</div>

Hallo Olivia,

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

---

<div class="post-metadata">

**Author:** ![olivia](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/olivia/32/3202_2.png) [@olivia](https://forum.wixstudio.com/u/olivia)\
**Post date:** [June 22, 2020, 1:13pm UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/3 "2020-06-22T13:13:56Z")

</div>

Yes that’s it! What was your solution?

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 22, 2020, 1:33pm UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/4 "2020-06-22T13:33:26Z")

</div>

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

```javascript
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");}
}

```

---

<div class="post-metadata">

**Author:** ![olivia](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/olivia/32/3202_2.png) [@olivia](https://forum.wixstudio.com/u/olivia)\
**Post date:** [June 22, 2020, 4:02pm UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/5 "2020-06-22T16:02:51Z")

</div>

Thank you so much!! 😀Works perfectly.

---

<div class="post-metadata">

**Author:** ![aircooledevolution](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aircooledevolution/32/16119_2.png) [@aircooledevolution](https://forum.wixstudio.com/u/aircooledevolution)\
**Post date:** [June 26, 2020, 4:36pm UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/6 "2020-06-26T16:36:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 26, 2020, 7:31pm UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/7 "2020-06-26T19:31:02Z")

</div>

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)

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

```

 ![](https://us1.discourse-cdn.com/wix/original/3X/b/2/b25a3f119191f0a0270bd52ce61d84f06876826e.png)

 ![](https://us1.discourse-cdn.com/wix/original/3X/a/a/aa5e13bbf1429b2f29e6dc7fe09a781b25cb55c5.png)  
in your case something like this…

```javascript
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](https://russian-dima.wixsite.com/meinewebsite/website-navigation)

```javascript
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.

---

<div class="post-metadata">

**Author:** ![aircooledevolution](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aircooledevolution/32/16119_2.png) [@aircooledevolution](https://forum.wixstudio.com/u/aircooledevolution)\
**Post date:** [June 29, 2020, 3:25pm UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/8 "2020-06-29T15:25:15Z")

</div>

@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) .

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [June 29, 2020, 3:40pm UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/9 "2020-06-29T15:40:22Z")

</div>

Have a read of Nayeli (Code Queen) example here.  
[Use dropdowns to navigate to another page on Wix](https://www.youtube.com/watch?v=iMror4Ox61I)  
[https://www.totallycodable.com/example-dropdown-navigation](https://www.totallycodable.com/example-dropdown-navigation)  
[https://www.totallycodable.com/wix/corvid/use-dropdowns-to-navigate-to-a-different-page](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](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.youtube.com/watch?v=B884Au7Orko)  
[https://www.vorbly.com/Vorbly-Code/WIX-CODE-DROPDOWN-OPTIONS-FROM-DATABASE](https://www.vorbly.com/Vorbly-Code/WIX-CODE-DROPDOWN-OPTIONS-FROM-DATABASE)

---

<div class="post-metadata">

**Author:** ![aircooledevolution](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aircooledevolution/32/16119_2.png) [@aircooledevolution](https://forum.wixstudio.com/u/aircooledevolution)\
**Post date:** [June 30, 2020, 2:36am UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/10 "2020-06-30T02:36:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bablifarm](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/bablifarm/32/14510_2.png) [@bablifarm](https://forum.wixstudio.com/u/bablifarm)\
**Post date:** [April 13, 2023, 5:57pm UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/11 "2023-04-13T17:57:16Z")

</div>

@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)?

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 14, 2023, 6:18am UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/12 "2023-04-14T06:18:46Z")

</div>

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

Example:

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

```

---

<div class="post-metadata">

**Author:** ![bablifarm](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/bablifarm/32/14510_2.png) [@bablifarm](https://forum.wixstudio.com/u/bablifarm)\
**Post date:** [April 14, 2023, 6:43am UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/13 "2023-04-14T06:43:29Z")

</div>

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…

```javascript
$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! 😋

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 14, 2023, 7:04am UTC](https://forum.wixstudio.com/t/change-submit-button-url-depending-on-dropdown-selection/31903/14 "2023-04-14T07:04:58Z")

</div>

If it’s working → then you got it 😉