[SOLVED] HELP! Selection for drop down to show text elements [Hide and Show]

Ask the community
,
1

Hey guys! First off, I appreciate all the help you can give. My current problem is I have a dropdown, that has two values. For this purpose it’ll be VALUE1 & VALUE 2. Once they select VALUE1 I want to show them a set of text boxes. If they select VALUE2 I want hide the text options for VALUE1 and show them the text options for VALUE2. I’ve tried the Wix code examples and no luck.

My current code is

export function selectservice_change(event, $w) {
if (event.target.value === “VALUE1”){
$w(“#pmakeupli1”).show();
$w(“#pmakeupli2”).show();
$w(“#pmakeupli3”).show();
$w(“#phairli1”).show();
$w(“#phairli2”).show();
$w(“#phairli3”).show();
$w(“#ptanli1”).show();
$w(“#ptanli2”).show();
$w(“#ptanli3”).show();
$w(“#ptanli4”).show();
$w(“#bmakeupli1”).hide();
$w(“#bmakeupli2”).hide();
$w(“#bmakeupli3”).hide();
$w(“#bhairli1”).hide();
$w(“#bhairli2”).hide();
$w(“#bhairli3”).hide();
$w(“#bhairli4”).hide();
$w(“#bhairli5”).hide();
$w(“#btanli1”).hide();

}

else (event.target.value === “VALUE2”)
$w(“#bmakeupli1”).show();
$w(“#bmakeupli2”).show();
$w(“#bmakeupli3”).show();
$w(“#bhairli1”).show();
$w(“#bhairli2”).show();
$w(“#bhairli3”).show();
$w(“#bhairli4”).show();
$w(“#bhairli5”).show();
$w(“#btanli1”).show();
$w(“#pmakeupli1”).hide();
$w(“#pmakeupli2”).hide();
$w(“#pmakeupli3”).hide();
$w(“#phairli1”).hide();
$w(“#phairli2”).hide();
$w(“#phairli3”).hide();
$w(“#ptanli1”).hide();
$w(“#ptanli2”).hide();
$w(“#ptanli3”).hide();
$w(“#ptanli4”).hide();

Now it isn’t working. It will show the items and then quickly remove them. It displays the results no more than a second or two.

2

Hi,

Few useful tips you can follow to make it easier and crystal clear to understand the code :
1- you can group the elements for the VALUE1 together ( group1) and group the elements for the VALUE2 together ( group2). so that you can hide and show the whole elements(group) at once.
2- Let the elements them selves be shown, make group1 and group2 hidden onLoad.
3- you have to check what is shown on the page to be hidden or what is hidden to be shown :

     if (event.target.value === "VALUE1"){
       $w("#group2").hide();
       $w("#group1").show();
     } 
      else if (event.target.value === "VALUE2"){
        $w("#group1").hide();
        $w("#group2").show();
     }

Good Luck.

Mustafa

3

Thank you so much it worked! I was missing braces and I used the group option and it simplified everything!

4

HI, I am now having the same issue, and have followed the above, but cannot get it to work.

I have a site where I want people to choose the number of guests they would like to invite to an event, and based on their number selection the corresponding fields will appear. I.e. choose 1 guest - 1 set of fields to complete appear, choose two guests and two sets of fields to complete appear, etc. They have the option to invite 5 guests. And for each guest they have to complete 7 fields. But I only want what they have to complete to appear.

I have grouped my 7 elements as directed above so rather than having to code for 7 individual fields for each guest, they are now group1, group2 etc.

This is my code:
export function dropdown1_onChange(event, $w) {
if (event.target.value === ‘1’) {
$w(" #group1 “).show();
$w(” #group2 “).hide();
$w(” #group3 “).hide();
$w(” #group4 “).hide();
$w(” #group5 “).hide();
}
else if (event.target.value === “2”) {
$w(” #group1 “).show();
$w(” #group2 “).show();
$w(” #group3 “).hide();
$w(” #group4 “).hide();
$w(” #group5 “).hide();
}
else if (event.target.value === “3”) {
$w(” #group1 “).show();
$w(” #group2 “).show();
$w(” #group3 “).show();
$w(” #group4 “).hide();
$w(” #group5 “).hide();
}
else if (event.target.value === “4”) {
$w(” #group1 “).show();
$w(” #group2 “).show();
$w(” #group3 “).show();
$w(” #group5 “).show();
$w(” #group5 “).hide();
}
else if (event.target.value === “5”) {
$w(” #group1 “).show();
$w(” #group2 “).show();
$w(” #group3 “).show();
$w(” #group4 “).show();
$w(” #group5 ").show();
}
}

As you have directed in the thread above, I have:
Individual elements are enabled by default to show on the page, however grouped elements are hidden on the page on onload
But I cannot get the code to work?
Can someone please help me? I am really stuck and need this to work ASAP.
Thanks!!!