Hide button when dropdown empty

Hello friends!

I have a lot of dropdowns and what I need is that if one of them is not completed the button is not shown.

I try this code but when I complete the dropdown the button is not shown.

someone could help me ? Thanks a lot

$w.onReady(function () {
    
let value = $w("#dropdown").value; 
    
    if (value === "") { 

        $w('#button').hide();

    } else {

        $w('#button').show(); 
    }
});

You need to check if it’s undefined because when there is no value it will be undefined it will not gonna be empty string. Also, if you have default selected item from dropdown it will not gonna be undefined.

Example:


$w.onReady(function () {
    let value = $w("#dropdown").value;

    if (value === undefined) {
        $w('#button').hide();
    } else {
        $w('#button').show();
    }
});


Hi thanks for your time! the dropdown is connected to a database but it doesn’t show anything by default, try your code but still the same problem. I tried with the clean code page and it still doesn’t work

What you need to do is console log your dropdown value and see what value it has and change undefined with that value.

I tried this, the button disappears, but it should appear when the dropdown changes.

$w.onReady(function () {
    let value = $w("#dropdown6").value;
    
     console.log(value)
          

    if (value === undefined || value === "") {

        $w('#button52').hide();
    } else {
        $w('#button52').show();
        
    }
});


Change your code like that then:

$w.onReady(function () {
    $w('#button52').hide();

    $w("#dropdown6").onChane(() => {
        let value = $w("#dropdown6").value;

        if (value === undefined || value === "") {
            $w('#button52').hide();
        } else {
            $w('#button52').show();
        }
    })
});

Every time value changes code will check the status again and again.

1 Like
Hi! thank you very much for answering. This is a very good idea if you have a single dropdown menu. But if you have 5 dropdowns, how do you apply it?

Depends on how you structure your dropdowns!

  1. normal single-selection dropdown-function
  2. stepped/cascading dropdown-function

For the normal sigle one a little example…

let DROPDOWN = [];
    DROPDOWN[0] = "#dropdown0";
    DROPDOWN[1] = "#dropdown1";
    DROPDOWN[2] = "#dropdown2";
    DROPDOWN[3] = "#dropdown3";
    DROPDOWN[4] = "#dropdown4";

$w.onReady(function() {
    $w(DROPDOWN[0]).onChane(()=> {let value = $w(DROPDOWN[0]).value; xxx(value);});
    $w(DROPDOWN[1]).onChane(()=> {let value = $w(DROPDOWN[1]).value; xxx(value);});
    $w(DROPDOWN[2]).onChane(()=> {let value = $w(DROPDOWN[2]).value; xxx(value);});
    $w(DROPDOWN[3]).onChane(()=> {let value = $w(DROPDOWN[3]).value; xxx(value);});
    $w(DROPDOWN[4]).onChane(()=> {let value = $w(DROPDOWN[4]).value; xxx(value);});
});

function xxx(value) {
    if (value === undefined || value === "" || value === null) {$w('#button52').hide();} 
    else {$w('#button52').show();}
}

Also do not forget not to mix coding with connected options inside the wix-editors properties-panel, what in most cases will cause problems.

Either do everything by code, or use properties-panel. Mixing both, will give you some headaches, for sure.

I just assume that you also could use DATASETS (although nothing can be found in your codings about it).

Hello Ninja!! nice to see you! try with your code but when changing any dropdown the button becomes visible.


Sorry, i copy-pasted an ERROR from Enes previous presented code, always check your CODE completely!!! I did not check (my fault).

??? You see the ERROR ???

!!! Just one little missing character = and your code won’t work !!!
I know, it was just a TYPO, but little typos breaks the code.

That was wrong…

$w(DROPDOWN[0]).onChane
let DROPDOWN = [];
    DROPDOWN[0] = "#dropdown0";
    DROPDOWN[1] = "#dropdown1";
    DROPDOWN[2] = "#dropdown2";
    DROPDOWN[3] = "#dropdown3";
    DROPDOWN[4] = "#dropdown4";

$w.onReady(function() {
    $w(DROPDOWN[0]).onChange((event)=> {let value = $w(DROPDOWN[0]).value; xxx(value); console.log(event.target.id+" changed!!!");});
    $w(DROPDOWN[1]).onChange((event)=> {let value = $w(DROPDOWN[1]).value; xxx(value); console.log(event.target.id+" changed!!!");});
    $w(DROPDOWN[2]).onChange((event)=> {let value = $w(DROPDOWN[2]).value; xxx(value); console.log(event.target.id+" changed!!!");});
    $w(DROPDOWN[3]).onChange((event)=> {let value = $w(DROPDOWN[3]).value; xxx(value); console.log(event.target.id+" changed!!!");});
    $w(DROPDOWN[4]).onChange((event)=> {let value = $w(DROPDOWN[4]).value; xxx(value); console.log(event.target.id+" changed!!!");});
});

function xxx(value) {
    if (value === undefined || value === "" || value === null) {
        $w('#button52').hide();} 
    else {$w('#button52').show();}
}

Also add CONSOLE-LOGS to inspect your own CODE for ERRORS!!!

1 Like
hello Ninja, I did see that detail but it still happens that when changing any drop-down menu the button appears. What I'm trying to do is make that button only appear when all dropdowns are complete.

Next time be more precisious with your wished functions.
Anybody knows what you are trying to achieve :sweat_smile:

I changed the example.
This time you have a “CHECK-FUNCTION” including a counter, which counts all not used/activated/valued DropDowns.

If it founds one, the counter will COUNT-UP.
If at the END of the LOOP, the counter is bigger than → 1, what does it mean ???


let DROPDOWN = [];
    DROPDOWN[0] = "#dropdown0";
    DROPDOWN[1] = "#dropdown1";
    DROPDOWN[2] = "#dropdown2";
    DROPDOWN[3] = "#dropdown3";
    DROPDOWN[4] = "#dropdown4";

$w.onReady(function() {
    $w(DROPDOWN[0]).onChange((event)=> {let value = $w(DROPDOWN[0]).value; check_DropDowns(); console.log(event.target.id+" changed!!!");});
    $w(DROPDOWN[1]).onChange((event)=> {let value = $w(DROPDOWN[1]).value; check_DropDowns(); console.log(event.target.id+" changed!!!");});
    $w(DROPDOWN[2]).onChange((event)=> {let value = $w(DROPDOWN[2]).value; check_DropDowns(); console.log(event.target.id+" changed!!!");});
    $w(DROPDOWN[3]).onChange((event)=> {let value = $w(DROPDOWN[3]).value; check_DropDowns(); console.log(event.target.id+" changed!!!");});
    $w(DROPDOWN[4]).onChange((event)=> {let value = $w(DROPDOWN[4]).value; check_DropDowns(); console.log(event.target.id+" changed!!!");});
});

function check_DropDowns() {let counter = 0;
    for (let i = 0; i < DROPDOWN.length; i++) {
        if(!$w(DROPDOWN[i]).value) {counter=counter+1}
        if(i === DROPDOWN.length-1) {
            if(counter>0) {console.log("Not all DropDowns checked!"); $w('#button52').show();}
            else {console.log("All DropDowns checked!"); $w('#button52').hide();}
        }
    }
}

Of course you can optimize it even more, but i think this should work for you.

And in future ALWAYS describe your wished function as most detailed as possible, because there are 1000 of different code-variations which can be your solution and it depends all on your detailed description of your issue.

Since you still had some issues, i checked your code.
In your case, this one worked well for you…

CODE-PART…

//--------- USER-INTERFACE ------------------------
let colorActive = 'rgb(175,245,155)'; //'rgb(155,200,100)';
let colorActive2 = 'rgb(155,200,100)';

let DROPDOWN = [];
DROPDOWN[0] = '#ddAreas';       //<-- dd --> stands for --> DropDown <--- CHANGED!!! --> OK!!!
DROPDOWN[1] = '#ddSubareas';    //<-- dd --> stands for --> DropDown <--- CHANGED!!! --> OK!!!
DROPDOWN[2] = '#ddUbicacion';   //<-- dd --> stands for --> DropDown <--- CHANGED!!! --> OK!!!
DROPDOWN[3] = '#ddBarrio';      //<-- dd --> stands for --> DropDown <--- CHANGED!!! --> OK!!!
DROPDOWN[4] = "#ddDispo";       //<-- dd --> stands for --> DropDown <--- DO KORRECTION !!!
DROPDOWN[5] = "#ddGenero";      //<--- CORRECT ALL THE REST !!!!     <--- DO KORRECTION !!!
DROPDOWN[6] = "#ddEstudios";    //<--- DO KORRECTION !!!
//--------- USER-INTERFACE -------------------------


$w.onReady(function() {
    $w(DROPDOWN[0]).onChange((event)=> { check_DropDowns(); console.log(event.target.id + " changed!!!"); });
    $w(DROPDOWN[1]).onChange((event)=> { check_DropDowns(); console.log(event.target.id + " changed!!!"); });
    $w(DROPDOWN[2]).onChange((event)=> { check_DropDowns(); console.log(event.target.id + " changed!!!"); });
    $w(DROPDOWN[3]).onChange((event)=> { check_DropDowns(); console.log(event.target.id + " changed!!!"); });
    $w(DROPDOWN[4]).onChange((event)=> { check_DropDowns(); console.log(event.target.id + " changed!!!"); });
    $w(DROPDOWN[5]).onChange((event)=> { check_DropDowns(); console.log(event.target.id + " changed!!!"); });
    $w(DROPDOWN[6]).onChange((event)=> { check_DropDowns(); console.log(event.target.id + " changed!!!"); });
}); 


function check_DropDowns() {console.log("Dropdowns-Total: ", DROPDOWN.length);
    let counter = 0;
    for (let i = 0; i < DROPDOWN.length; i++) {console.log($w(DROPDOWN[i]).value);
        if (!$w(DROPDOWN[i]).value) { counter = counter + 1 }
        if (i === DROPDOWN.length - 1) {
            if (counter > 0) { console.log("Not all DropDowns checked!"); $w('#btnPublicar').hide();} 
            else {console.log("All DropDowns checked!"); $w('#btnPublicar').show();
                $w(DROPDOWN[0]).style.backgroundColor = colorActive2; 
                $w(DROPDOWN[1]).style.backgroundColor = colorActive2; 
                $w(DROPDOWN[2]).style.backgroundColor = colorActive2; 
                $w(DROPDOWN[3]).style.backgroundColor = colorActive2; 
                $w(DROPDOWN[4]).style.backgroundColor = colorActive2; 
                $w(DROPDOWN[5]).style.backgroundColor = colorActive2;  
                $w(DROPDOWN[6]).style.backgroundColor = colorActive2;  
            }
        }
    }
}
Hello Ninja You are the best of this forum! thank you very much it works perfect!
1 Like

Thanks, maybe not the best, but one of them i hope.

The best one could be him —> J.D. (at least the most hard-working):wink:
And 2 others (which i am missing a little bit) - → Yisrael & Ahmad.

Here you can find enough good coders, i have already seen a lot of them inside this forum.

1 Like