Hide button when dropdown empty

tuempleoar · September 15, 2022, 6:51pm

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(); 
    }
});

loeiks · September 16, 2022, 12:46am

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();
    }
});

tuempleoar · September 16, 2022, 1:06am

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

loeiks · September 16, 2022, 2:04am

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

tuempleoar · September 16, 2022, 3:33am

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();
        
    }
});

loeiks · September 16, 2022, 9:52am

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.

tuempleoar · September 17, 2022, 11:28pm

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?

CODE-NINJA · September 18, 2022, 12:27am

Depends on how you structure your dropdowns!

normal single-selection dropdown-function
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).

tuempleoar · September 18, 2022, 12:48am

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

CODE-NINJA · September 18, 2022, 1:46am

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!!!

tuempleoar · September 18, 2022, 7:07am

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.

CODE-NINJA · September 18, 2022, 9:47am

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

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.

CODE-NINJA · September 18, 2022, 9:45pm

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;  
            }
        }
    }
}

tuempleoar · September 18, 2022, 11:19pm

Hello Ninja You are the best of this forum! thank you very much it works perfect!

CODE-NINJA · September 19, 2022, 12:48am

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

Topic		Replies	Views
dropdown not selected, shows box Ask the community code , question	0	62	February 10, 2023
Hide Button If No Content In Database (Repeater) Ask the community code , question	17	918	June 2, 2021
Hide element if database is empty - doesn't reappear when I fill database. Ask the community code , question	12	456	August 1, 2019
Show/Hide by Dropdown selection Ask the community code , question	1	596	April 26, 2018
Show/Hide Button on Dynamic page depending on if data field is empty Ask the community code , question	0	102	April 20, 2022

Hide button when dropdown empty

??? You see the ERROR ???

Related topics