# Conditional Button Visibility

**URL:** <https://forum.adalo.com/t/conditional-button-visibility/27738>\
**Category:** Get Help\
**Created:** [May 29, 2022, 7:47pm UTC](https://forum.adalo.com/t/conditional-button-visibility/27738 "2022-05-29T19:47:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![naossoan](https://avatars.discourse-cdn.com/v4/letter/n/a3d4f5/32.png) [@naossoan](https://forum.adalo.com/u/naossoan)\
**Post date:** [May 29, 2022, 7:47pm UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/1 "2022-05-29T19:47:15Z")

</div>

How to make it so a button is visible if ANY inputs on the screen are empty?

You can’t nest “empty” groups with visibility settings for each input because this is an AND relationship, not an OR relationship. For example if you have fields Name, Email, Password and create groups like

Name Visibility → Visible if Name is Empty  
Email Visibility → Visible if Email is Empty  
Password Visibility → Visible if Password is Empty

This is fine if ALL the fields are empty, but if you put anything in any of the fields it will make the button invisible because these are all nested within each other. I don’t want the button to disappear until ALL the fields are filled.

Seems like the only option is to do the reverse with a button that is only visible once all fields are filled…but I like the look of having a “disabled” button until all the fields are filled.

---

<div class="post-metadata">

**Author:** ![JL\_LJ](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@JL\_LJ](https://forum.adalo.com/u/JL_LJ)\
**Post date:** [May 29, 2022, 8:22pm UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/2 "2022-05-29T20:22:18Z")

</div>

Hi @naossoan ,  
So as long as there is one field empty, be button will be visible but not enable correct. once all 3 are filled in, button is clickable, and all this with button always visible correct?

---

<div class="post-metadata">

**Author:** ![naossoan](https://avatars.discourse-cdn.com/v4/letter/n/a3d4f5/32.png) [@naossoan](https://forum.adalo.com/u/naossoan)\
**Post date:** [May 30, 2022, 6:55pm UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/3 "2022-05-30T18:55:35Z")

</div>

Well not exactly. I was trying to follow the logic of the Adalo help section for making an “inactive” button.

They do it by having 2 buttons. One is a bit lighter in color to indicate that it is ‘inactive’ while the other one is normal.

They use the example of an input field controlling which button is visible. If the input is empty, the “inactive” button is visible, but when you fill in the input, the normal button becomes visible and the ‘inactive’ one disappears.

This works fine if you just want it to be controlled with a single input, but doesn’t work if you want it to rely on multiple inputs…

trying to figure out how to do it.

---

<div class="post-metadata">

**Author:** ![JL\_LJ](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@JL\_LJ](https://forum.adalo.com/u/JL_LJ)\
**Post date:** [May 30, 2022, 7:03pm UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/4 "2022-05-30T19:03:51Z")

</div>

Can you show that help section? Probably that is just a button with different color and no action associated to it and the other button reverse, and basically they have the reverse visibility conditions.

You mean, something like this: [The One with the Visible button](https://previewer.adalo.com/1adff23c-14b8-4c5c-92a1-41fcae438833)

---

<div class="post-metadata">

**Author:** ![charleshope](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/charleshope/32/25088_2.png) [@charleshope](https://forum.adalo.com/u/charleshope)\
**Post date:** [May 30, 2022, 7:54pm UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/5 "2022-05-30T19:54:04Z")

</div>

1. Create the button
2. Add visibility conditions to this button associated with one of the inputs. Only visible if input A is empty.
3. Make this button a group.
4. Add visibility conditions to this group associated with another of the inputs. Only visible if input B is empty.

Repeat until you have all inputs covered.

---

<div class="post-metadata">

**Author:** ![naossoan](https://avatars.discourse-cdn.com/v4/letter/n/a3d4f5/32.png) [@naossoan](https://forum.adalo.com/u/naossoan)\
**Post date:** [May 30, 2022, 8:02pm UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/6 "2022-05-30T20:02:08Z")

</div>

> [@charleshope](#):
>
> 1. Create the button
> 2. Add visibility conditions to this button associated with one of the inputs. Only visible if input A is empty.
> 3. Make this button a group.
> 4. Add visibility conditions to this group associated with another of the inputs. Only visible if input B is empty.
> 
> Repeat until you have all inputs covered.

Yes, that is what I am saying.

This works ONLY for the button I want to be hidden until ALL fields are filled, however it DOES NOT work for the initially visible “inactive” button because as soon as you put anything in ANY of the fields, the button disappears, which I don’t want to happen until all the fields are filled.

These nested visibility settings are like AND relationships, not OR relationships…

So it works fine for the button I want to show when ALL fields are filled, but not the other way around.

---

<div class="post-metadata">

**Author:** ![JL\_LJ](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@JL\_LJ](https://forum.adalo.com/u/JL_LJ)\
**Post date:** [May 31, 2022, 11:06am UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/7 "2022-05-31T11:06:52Z")

</div>

So basically is just the sample I gave you but hiding the button but not disabling as I created. Your statement here is how I did it before:

> Well not exactly. I was trying to follow the logic of the Adalo help section for making an “inactive” button.
> 
> They do it by having 2 buttons. One is a bit lighter in color to indicate that it is ‘inactive’ while the other one is normal.
> 
> They use the example of an input field controlling which button is visible. If the input is empty, the “inactive” button is visible, but when you fill in the input, the normal button becomes visible and the ‘inactive’ one disappears.
> 
> This works fine if you just want it to be controlled with a single input, but doesn’t work if you want it to rely on multiple inputs…

So this is the example I madenow, I changed now to button visible or not but depending on all fields filled in:

You need all 3 fields filled in to show the button, if one at least is empty, the button will not show.

> **[The One with the Visible button](https://previewer.adalo.com/1adff23c-14b8-4c5c-92a1-41fcae438833)**
>
> Built with Adalo

---

<div class="post-metadata">

**Author:** ![Rozza](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/rozza/32/22780_2.png) [@Rozza](https://forum.adalo.com/u/Rozza)\
**Post date:** [May 31, 2022, 11:17am UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/8 "2022-05-31T11:17:04Z")

</div>

Pragmaflow had a video tutorial which may help with a solution.

[![](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/f/f/ffe0259056e81d10dd11a4fb9206bbabf7cde209.jpeg "Tutorial - Adding validation to custom forms") ](https://www.youtube.com/watch?v=IsqfoiTalgI)

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/system/32/40401_2.png) [@system](https://forum.adalo.com/u/system)\
**Post date:** [June 10, 2022, 11:17am UTC](https://forum.adalo.com/t/conditional-button-visibility/27738/9 "2022-06-10T11:17:33Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
