Open URL depending on dropdown index

Ask the community
,
1

Hi, my code doesn’t work for some reason I can’t figure out.
The user selects an element from the dropdown, once you click the button, it will call to a function that depending on the index of the element will open a new tab with a specific URL.

The problems right now are:

  1. It will only open a tab after clicking for the second time.

  2. After opening the first tab, if the user changes the element in the dropdown and clicks on the button, it will open the old URL and only after the second click it will open the new URL.

$w . onReady ( function () {

$w ( ‘#button1’ ). onClick (() => { openURL ( $w ( “#dropdown1” ). selectedIndex );});
$w ( “#dropdown1” ). options = [
{ “label” : “Locales” , “value” : “locales” },
{ “label” : “Viviendas” , “value” : “viviendas” },
{ “label” : “Mansiones” , “value” : “mansiones” }
];
});

function open URL ( ind ) {
switch ( ind ) {

case 0 :
console . log ( ind );
$w ( “#button1” ). link = “URL1”
$w ( “#button1” ). target = “_blank” ;
break ;
case 1 :
console . log ( ind );
$w ( “#button1” ). link = “URL2” ;
$w ( “#button1” ). target = “_blank” ;
break ;
case 2 :
console . log ( ind );
$w ( “#button1” ). link = “URL3” ;
$w ( “#button1” ). target = “_blank” ;
break ;
}

}

2

Hi! It seems that the problem is with the use of the button element to redirect to the URLs. You should update the URL in the function openURL() based on the selected index of the dropdown before opening the new tab.

Try out:

let currentLink;

$w.onReady(function () { 
  $w('#button1').onClick(() => {openURL($w("#dropdown1").selectedIndex);});
  $w("#dropdown1").options = [
    {"label": "Locales", "value": "locales"},
    {"label": "Viviendas", "value": "viviendas"},
    {"label": "Mansiones", "value": "mansiones"}
  ];
});

function openURL(ind) {
  switch(ind) {
    case 0:
      currentLink = "URL1";
      break;
    case 1:
      currentLink = "URL2";
      break;
    case 2:
      currentLink = "URL3";
      break;
  }
  $w("#button1").link = currentLink;
  $w("#button1").target = "_blank";
}
3

Hi! First of all, thanks for helping out!

Tried out your suggestion but the very same problems are still happening:

  1. It still wont open the new tab with 1 click, needs 2 clicks.

  2. After first tab has been opened, it will open the old URL with 1 click and the new URL with the 2nd click.

EDIT + SOLUTION:

$w . onReady ( function () {

$w ( “#dropdown1” ). options = [
{ “label” : “Locales” , “value” : “locales” },
{ “label” : “Viviendas” , “value” : “viviendas” },
{ “label” : “Mansiones” , “value” : “mansiones” }
];

});

$w ( ‘#dropdown1’ ). onChange ( ( event ) => {
if ( $w ( ‘#dropdown1’ ). value === “locales” ) {
console . log ( $w ( ‘#dropdown1’ ). selectedIndex );
$w ( “#button1” ). link = “http://groow.es/locales” ;
$w ( “#button1” ). target = “_blank” ;
}
if ( $w ( ‘#dropdown1’ ). value === “viviendas” ) {
console . log ( $w ( ‘#dropdown1’ ). selectedIndex );
$w ( “#button1” ). link = “http://groow.es/viviendas” ;
$w ( “#button1” ). target = “_blank” ;
}
if ( $w ( ‘#dropdown1’ ). value === “mansiones” ) {
console . log ( $w ( ‘#dropdown1’ ). selectedIndex );

$w ( "#button1" ). link  =  "http://groow.es/mansiones" ; 
$w ( "#button1" ). target  =  "_blank" ;

}
});