# Display a button when all required inputs are filled or enterted

**URL:** <https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540>\
**Category:** Need help\
**Created:** [October 8, 2022, 9:20pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540 "2022-10-08T21:20:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jayyoms](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jayyoms/32/109143_2.png) [@jayyoms](https://forum.bubble.io/u/jayyoms)\
**Post date:** [October 8, 2022, 9:20pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540/1 "2022-10-08T21:20:32Z")

</div>

How can I set a button to display only when all required inputs in a group are filled in/entered?

---

<div class="post-metadata">

**Author:** ![tylerboodman](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/tylerboodman/32/242142_2.png) [@tylerboodman](https://forum.bubble.io/u/tylerboodman)\
**Post date:** [October 8, 2022, 9:26pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540/2 "2022-10-08T21:26:21Z")

</div>

As good UX practice I don’t make the button invisible, but I do have it greyed out until the inputs are all filled in. But the setup is the same. I basically add a condition to the button with the condition `Input Name is not empty and Input Address is not empty or Input Age is not empty` (repeating this for all of your inputs) and it makes the button `This element is not clickable "no"` and `Background color` (regular color)

Then I make the button not clickable by default, and grey color by default so the entire condition has to be met for it to be clickable. If i flipped it around sometimes I noticed the button could be clicked for a fraction of a second while the page was loading

---

<div class="post-metadata">

**Author:** ![jayyoms](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jayyoms/32/109143_2.png) [@jayyoms](https://forum.bubble.io/u/jayyoms)\
**Post date:** [October 8, 2022, 10:15pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540/3 "2022-10-08T22:15:18Z")

</div>

This looks like a much smarter solution than what I was ging to try.

I think the only difference is that it uses `Input Name is valid`.

But having some weird behaviour where its not working right now to debugging to make sure I haven’t done anything wrong

---

<div class="post-metadata">

**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\
**Post date:** [October 8, 2022, 11:06pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540/4 "2022-10-08T23:06:03Z")

</div>

But it doesn’t have to be this hard. This is what “this input should not be empty” is for.

---

<div class="post-metadata">

**Author:** ![tylerboodman](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/tylerboodman/32/242142_2.png) [@tylerboodman](https://forum.bubble.io/u/tylerboodman)\
**Post date:** [October 8, 2022, 11:09pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540/5 "2022-10-08T23:09:43Z")

</div>

Oops forgot to mention in my case I was using auto-binding with a “I’m done, submit this” kind of form where edits are being done on the fly. Yes @jayyoms if you’re creating something from your submit button from scratch just do what @keith said 😂

---

<div class="post-metadata">

**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\
**Post date:** [October 8, 2022, 11:10pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540/6 "2022-10-08T23:10:34Z")

</div>

Good observation @tylerboodman!

---

<div class="post-metadata">

**Author:** ![tylerboodman](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/tylerboodman/32/242142_2.png) [@tylerboodman](https://forum.bubble.io/u/tylerboodman)\
**Post date:** [October 8, 2022, 11:11pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540/7 "2022-10-08T23:11:38Z")

</div>

I think Bubble considers invalid inputs as empty still

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [December 17, 2022, 9:21pm UTC](https://forum.bubble.io/t/display-a-button-when-all-required-inputs-are-filled-or-enterted/227540/8 "2022-12-17T21:21:33Z")

</div>

Closed on December 17, 2022, 9:21pm UTC

This topic was automatically closed after 70 days. New replies are no longer allowed.
