How To Require Inputs To Be Filled In When "submit" Button Is Outside Of It

[JustinC]

I have a repeating group that has inputs inside of it and a submit button OUTSIDE of the repeating group that saves the page Thing which has the list of things the repeating group holds in it.

I have each input set to should not be empty, but because the button is outside of the repeating group they don’t appear to be linked and the user can submit the form any way.

How can I ensure that if they add another Thing to the repeating group, that when they click ’ request quote ’ that all fields, of each thing inside the repeating group are filled in?

Note that I am using auto-binding so things are filled and changes are made to the database as the user enters information.

[scottb50]

I haven’t tried this myself, but you could create a field/state called resRequests. When a user adds/subtracts flights, increase/decrease the resRequest by 1 (auto binded). Then use that number as a condition when testing for a completed form. Making the button unclickable until the form is complete and adding a tooltip explaining the need for a completed form should help users understand.

This may not be the most efficient method as it calls for extra workflows ($). I have yet to play with states vs. fields. Maybe that requires less server resources.

[JustinC]

The custom states in Bubble is one of the hardest things to grasp and I wish there were a better explanation somewhere.

Do I create a custom state on a hidden group? Or an input?

Does it matter even where I put the custom state?

The way I think I hear you is to create a custom state on something as a number, and when an input is changed, change the state on the element by +1, and if there are 4 fields in each db row, prevent the button from being clickable unless Do A Search For All Things Verification-Value = 4?

[scottb50]

As I understand it in Bubble-eze:

A thing exists in the database. When you set the value of a thing, It remains in the database. You can do a search for a thing at any time, from any page. You can change it, delete it, etc.

Think of a state as being a temporary thing that lasts for only the current pageview.

Simple Flight counter:
For example, if we were to build a simple add/subtract calculator to count flights, we would need three elements:

1. Number of flights. (Starting value: 0)
2. add button
3. subtract button

When a user clicks on the +/- buttons, the number of flights changes accordingly. We want this to happen without using things, just states.

Workflows:

Step one.

When page is loaded, create and set the state of flights to zero.

and

Step Two.

show the number of flights and the current state of the group’s flights, (within the editor) dynamically.

Step Three:

When the (+) button is clicked, add 1 to the state of flights.

and

To create the (-) button, copy and paste the + button (with workflows). Change the new button’s workflow to subtract from the state.

IMPORTANT PART: During this whole process the value of “flights” never gets entered into your database. That is the only difference between states and things. You can, put the current value into the database as you would with any other element’s value. If you don’t save the value to the database, or pass it via URL variable, it will be lost when the user leaves the page.

Step Four:

When the user clicks on the “submit” button, the state value is set in the database and is now a thing.

In your case, you would first set the state of your repeating group to 1, representing the first flight. You would then, in your workflow, add and subtract flights based on user input. When the user is done adding and subtracting, the outside “submit” button submits the final state value to the database or API.

Wow, that was a lot. I hope it makes sense. You might want to ask @romanmg and/or @emmanuel if I’m right with this. They’re geniuses. I’m learning as I go.

[scottb50]

Bubble - Visual Programming

I know there’s an open bubble someplace that I can copy this into. I just don’t know where.

[JustinC]

This one is really throwing me for a loop.

In this particular case, there is a repeating group containing the functions you’ve outlined and they are working well.

What I can’t figure out is how to make the fields REQUIRED as not empty in order to submit the ‘request quote’ button.

The repeating group is using auto binding.

I have tried creating an input and also a group and setting the state when an input is changed. But what happens when the input becomes empty from the user? How do i change it back?

Where does the group or element with the custom state go so that I can prevent actions from running unless 4 fields (per flight request’s leg) are filled out?

Flight requests, contain flight legs (repeating group) and all inputs auto bind as the user builds their itiniary. When request quotes is clicked the flight request becomes confirmed.

Bubble Editor - Operators-dashboard

[gf_wolfer]

I jumped in the app but could not find what page this is on (too many to look around)

So I will say roughly how I structured an app of mine with a similar situation.

My app has a dynamic number of tickets for an event, and the user must fill in contact info for each ticket purchased. I used a condition on the main submit button (your request quote button) to only work when Repeating Group’s Tickets:filtered (field 1 is not empty, field 2 is not empty):count = current pages #tickets requested
If that condition was not met I caused some animation or alert

For your situation it really depends on where and how you keep track of and save the data in those fields, but hopefully the idea of using LegsData:count = ‘user defined number of legs’ will help

[JustinC]

I tried that, and I’m not sure if this is a bug or not @emmanuel , but when you select and fill in one of these inputs inside the repeating group that is set to AUTO-BINDING, and then you CLEAR the field again (search box field), for some reason it still keeps/saves the information in the auto-binded database, even though the search box input is in-fact cleared.

So, i can’t prevent the button from being clickable because my condition is set as you suggest and is searching for empty fields and isn’t finding any, even though the search box input is visually empty.