Fill input elements on button click


Hello,
I have the attached screen, been trying to get it working without success.
What I am trying to achieve is pretty simple, the user fills in Zip code and clicks on “Lookup” button, that calls an API and fills out city input and state dropdown. I already have the API working , but cannot seem to find a way to display API data in the elements. I only see “Display Data” for groups, not individual elements!!

Same with clicking the “location” icon. I can get the map to load, but not able to display the address details below. I can get the “Current geographic position” from the map, but not sure how to display that data.

Appreciate any help.
Thank you

Anyone?? This has been very frustrating for me, very simple thing, yet not able to achieve this.

I haven’t done much with APIs other than the out of box things like AirTable and SendGrid, but I did notice your comment here and hoped this would help:

You typically load data in a group, but then you use elements (text, inputs, etc) to choose WHAT to display from that group. So if I had a group type ‘Address’, and I displayed ‘This Address’ (or whatever you’re populating it with), the group is just a box, a blank template if you will. But you can add an element for ‘Address Line 1’ inside that group, and the data source is ‘Parent Group’s: Address Line 1’ (or whatever it is called in the database)

In your case, you’d tell the City & State ‘Parent Group’s City’ & ‘Parent Groups State’

I hope that points you in the right direction!

Thank you for the response. I have been working with bubble for a while now and I do know how to display data for a group.

However my current case is little different. On page load city and state data is pulled from the database and displayed using the “group display data” option. But if the user wants to modify the data, he/she can lookup using zip code and I need to populate the city and state data into the input elements after the “Lookup” button is clicked.

Is there a way to achieve this?
Thank you

1 Like

Understood! I noticed your account had joined the forum so I assumed you were new to the Bubble ecosystem, my bad.

What if instead, the button click sets a custom state of ‘Yes’, and you have conditions on the inputs that when custom state is ‘Yes’, ‘Default Value is (dynamic thing)’

Tried custom states also, please see below. When Lookup button is clicked I set the custom state “zip_lookup” to yes. In the element conditions I check whether “zip_lookup” is yes, and call the API. I can see the API running and pulling the data when I debug, but the value does not come into the box, no matter what.

Screenshot 2023-07-19 225554

Instead of ‘Placeholder’ can you try ‘Default Value’?

There is no default value option, this is an input element. Please see below
Screenshot 2023-07-20 074447

FYI… for an input element, the default value is the Initial content property/field.

1 Like

Tried it with Initial content field also, no luck.

I finally figured it out, I had auto binding set for both city and state controls. I just tried turning it off and both are working fine now.
Auto binding is not mandatory for me and not a deal breaker.
Thanks for your help.

1 Like

Thanks for that correction! I inadvertently was looking at a searchbox and not an input on my app…

Glad you got it working! Is this in conjunction with the state & initial content conditions?

Yes, once I disabled auto binding the values populated just fine. For input element it is “Initial Content” and for the dropdown it is “Placeholder”

1 Like

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