Forum Academy Marketplace Showcase Pricing Features

How to build editable input form

Hi there

I’m new to bubble. I have a question seems like very basic however I can’t find answers anywhere including purchased online bubble course so I’m posting here in the community to see if I can get some help.

Here is the workflow of what I’m trying to create:

An input form with “submit” button, once user fills all information and click “submit”, with data being saved in the database, the button text changes from “submit” to “update”. The input fields in the same page have been filled with information filled from previous step and are editable, once user made edits and click on “update”, they will overwrite existing information in the database.

My question is:

Can this workflow be done on one page? (Save New Data and Update Existing Data) or do I need two pages, and how?

Any suggestions will be helpful, thanks!

Ann

1 Like

Hi Ann :slight_smile: You can do this in the same inputs if you’d like, when making changes to the Current User. Let’s say you want to change the button from ‘Submit’ to ‘Update’ after the person has submitted their information for these three fields: First Name, Last Name and Handle. So to change the wording from ‘Submit’ to ‘Update’ on the button, you could create a conditional statement on the button such as 'When Current User’s First Name isn’t empty AND Current User’s Last Name isn’t empty AND Current User’s Handle isn’t empty", property to change: “Text”, and change the word from ‘Submit’ to ‘Update’. Then also make sure you check the boxes ‘this input can’t be empty’ for each of the input elements. If the workflow is originally ‘Make Changes to a Thing’ Thing to Change: Current User, fields to change: First name, Last name, and Handle – then everything should be the same when you change the text from Submit to Update. :slight_smile:

*You’d also want to set the default values for the inputs to be ‘Current User’s First Name’, ‘Current User’s Last Name’, ‘Current User’s Handle’, so that they would show/allow the User to edit their information after submitting it the first time.

2 Likes

Let’s say you’re making changes to a User’s “Address”. The “Address” has data field “Name”.

The inputs will be making changes to the “Address”. So when click on “Submit,” the workflow will makes changes to the Current User’s Address OR create a new “Address” (check the box that says “Create New Thing if it doesn’t exist”) with information in the inputs. You’ll need to also assign the User that “Address” as the checkbox alternative workflow doesn’t assign the “Address” to the user automatically.

As for having the inputs appear on the inputs, you can set the inputs’ initial contents to be “Current User’s Address’ Name”

Initially, since the User’s “Address” is empty, the inputs will be empty.

1 Like

Hi there

thank you all for your help, it’s good to know I can do this on the same page, since in my case each form is uniquely associated with an user account, I’m going to set up my user accounts and try it out!

Ann

2 Likes

Hi there

Thanks for the help. I’m readying through again and still get confused and could you be more specific how this works?

Let’s say I’m creating a form with 2 input fields (Title, Description) and one button (Submit).

  1. User input in input field Title and Description.
  2. User Click on Submit, data gets stored in database;
  3. On the same form, previous input still exist and not being cleared, user make edits in “Title” field, click “Submit” button, in database, new edits in “Title” field overwrite previous record.

I tried different approaches, every time when I make updates on the existing input field of the same form and when I click on “Save” button, it created a new record in database which I don’t want.

Here are my question:

  • Should these input fields be dynamic or static, if dynamic how to set?
  • What are the actions associated with “Submit” button other than create a new thing;
  • How to use Auto-binding in this case.

Really appreciate if you can help!

Juria

Hey Juria :slight_smile: Can you share a link to your app in the editor mode? That will give a better idea of how to do this with your data structure.

1 Like

Hi, Faye, thanks for the response.

I don’t know how to share a link in editor mode, but attached is the screenshot, hope that’s straightforward enough, if not, could you advise how to share an editor mode link?

  • I input title, description, click save to save info in database
  • On the same page, when I change title/description, click save, I want the updated info overwrite existing info in database.

Currently Whatever I try, when I make change in title/decryption and click save, it create a new record in database.

If anyone can help, thanks!

Juria

I think it has to do with the workflows creating a new Thing every time, instead of making changes to a Thing. To share the link you would copy+paste the URL of your application, to this forum post. For example (this is the Forum App’s URL in the editor mode):

Then copy+pasted here is:

(If you’d rather share it through private message that works too. :slight_smile: )

1 Like