Input Hide and Show on Drop Down Selection

Ask the community
,
1

Hello Everyone,

I simply what a drop downs selection to hide or show an input field. My code almost works, for some reason if i select either of the two drop selections it will hide the input field, and also wont show it if I change the selection . Any help would be greatly appreciated.

export function dropdown3_change() {
if ($w( “#dropdown3” ).value === 1 ){
$w( “#input1” ).show();
} else ($w( “#dropdown3” ).value === 0 )
$w( “#input1” ).hide();
}

Thank you!

2

Hi Ben,

The seemingly numeric value of the dropdown is actually of the type text. Put quotations around the “1” and “0”.

3

Hello together,

in addition to Anthonys advice (which wants you to convert the type of your values) , i can give you another (not very correct, but working way) to solve your problem.

I call it —> “the lazy way” :grin:

This is your code, try again… (normaly this should also work).

exportfunction dropdown3_change() {if ($w("#dropdown3").value == 1){    $w("#input1").show();    } else ($w("#dropdown3").value ==0)        $w("#input1").hide();    }

But it is not tested, and is also not the very correct way.:grin:

4

Hi Ben :raised_hand_with_fingers_splayed:

You can use either the value or the selected index properties to check whether to show or hide the input field.

let value = $w("#dropdown3").value;
let selectedIndex = $w("#dropdown3").value.selectedIndex;

// Using the value property
if (value === 'Empty') {
    $w("#input1").hide()
} else {
    $w("#input1").show()
}

// Using the selected index property
if (selectedIndex === 0) {
    $w("#input1").hide()
} else {
    $w("#input1").show()
}

Hope this helps~!
Ahmad

5

Thank you for all of your replies. But unfortunately I am still experiencing the same problem with each solution you have all suggested. For each suggestion if I select either selection from the drop down the input field will disappear and not reappear if i select either selection.

6

Whaaaaaaaaat? 2x Corvid-Masters and a Ninja could not help you? :grin:

DAMN! Ok, perhaps this can help you…

https://russian-dima.wixsite.com/meinewebsite/enable-button-check

It’s an absolut similar example to your issue.

EDIT:
And Ahmand’s solution should also work, there was just a little COPY & PASTE misstake…

let value = $w("#dropdown3").value;
let selectedIndex = $w("#dropdown3").selectedIndex;

// Using the value property
if (value === 'Empty') {
    $w("#input1").hide()
} else {
    $w("#input1").show()
}

// Using the selected index property
if (selectedIndex === 0) {
    $w("#input1").hide()
} else {
    $w("#input1").show()
}

So you have more then 2 different ways how to do it :wink:

7

Create a new page.

  1. Create a INPUT + DROPDOWN (“input1” + “dropdown1”+)
  2. Insert teh following code for example into your page-code-section (just COPY & PASTE).
  3. Modify the given CODE by your needs if needed.
$w.onReady(function () { });

export function dropdown1_change(event) {xxx()}

function xxx (parameter) {
 
 let value = $w("#dropdown1").value;
 let selectedIndex = $w("#dropdown1").selectedIndex;

 // Using the value property
 if (value === 'Empty') {
        $w("#input1").hide()
    } else {
        $w("#input1").show()
    }

 // Using the selected index property
 if (selectedIndex === 0) {
        $w("#input1").hide()
    } else {
        $w("#input1").show()
    }
}

and here a special-example just 4 you…
https://russian-dima.wixsite.com/meinewebsite/bounty

As you can see, it is Ahmads suggested CODE but a little bit more expanded.

With this CODE you can work with both methods (value & selectedIndex).

8

I finally got it working! I am new to Corvid as you can tell. Thank you so much for your help and patience!

9

No problem! We all started at ground ZERO :laughing: