I am trying to achieve a functionality inside a form. The end goal is to have a user fill out multiple phones numbers, email , addresses etc. Right now i have added 3 dynamic collapses. Each successive dynamic collapse opens up with the new form to input the phone type and the phone numbers. I was wondering if there is an easier way to achieve this that a block just repeats itself if i click the plus icon. Think of it like an IOS contact where clicking the plus icon generates a new input row for the type of phone and the actual number.
Asking this as I set up the phone collapses , but the client also wants the email and addresses. I can repeat the same logic but it is very tedious and arranging th containers might become a problem. Thank You! The community is really awesome for finding solutions when stuck at a dead end!
I just started using wappler to come from a UI design role to actual development for demos. Really impressed with the whole software. Thanks wappler team!
I am having trouble figuring out what you are trying to achieve. I know your site isn’t live but do you have a link to a site that does what you are trying to do as an example?
This is what I am trying to achieve across three categories: Address, Phone, Email. As you can see I only added about three + signs. Now I want to achieve the same for email and address, but i feel the container alignment might screw up. It would be awesome if I could somehow incorporate a repititve row generator that adds these rows dynamically at the click of the plus icon.
You likely won’t be able to do that as you will have to bind the fields to your database input steps and need as many columns in your database to accommodate them.
You could probably do it the way you are doing it now but limit it to say three phone numbers. There is no way to be able to bind any sort of dynamic form field to your input action.
As far as he database is concerned, you would need 2 tables, one for the single values and one for the multiple values linked to he 1st table - e.g. phone numbers etc.
Something similar could be achieved quite easily i think using 1 form and a table.
Start with a query to retrieve any numbers already added
Create a BS table with the current numbers already stored in the database table (you can play with the layout to match the form as closely as possible)
Create the input form below
On database success event of the form reload the numbers query which will refresh the table giving the impression it moves up to the table and also reset the form ready for the next entry
You could optionally add some animations to the process