Create or delete a div on click in my form

Hi !
I have a large profile form that allows you to add exceptional or regular constraints for the development of a schedule.
I would like to:
-generate a new row by clicking on “Add constraint”
-delete the line and the corresponding variables by clicking on the trash can.
The data will only be saved when the form is submitted
How can I do that?

Hi,
best approach is to create an Array variable which will hold your data, one item in the array will be one line of your form.
You can create a container, and bind the repeat items to this variable.
Then just make your template for each line. On each input on each line, bind the initial value to the data in the corresponding context.item, and add an onChange workflow which will update the array at the context.item.index position.
On the Add button, push in your variable array a new item with some initial values.
On the delete button, delete the context.item.index element on your array.

On your final workflow, you will be able to use the array variable

If some of these steps are not clear let me know, and i will go on a more detailed version
You have a more detail explanation here

1 Like

Thankyou very much for this explanation !

I’m already stuck on the second step… :sweat_smile: This is what I did :

I created the variable (not sure of the format at all):

I created a container and copie pasted my line (div) into it.

I binded it with my variable:

I tried to bind the first input to the corresponding context.item

I think I already make at least 5 misakes at this point but I can’t bind anything for the following inputs. I can’t choose an option for editing formula in the initial value field…

Please help !!

Have you tried copying the screenshots from this post?

Yes I try to understand but no matter wich “element to repeat” item I bind, I’ve got an empty list and I can’t bind the input id…

Sorry for my english

@aurelie speak about an array variable. It coult be an objetct variable too?
I need an array (list) of div (items) right?

You want a container, or a div, or columns in your page.
Then you need to bind data in the item property of the element. The data to bind needs to be an array, it can be a collection or any other array. You can also add manually a sample array like this [{id:1},{id:2},{id:3}] just to experiment how it works. The array must have a property with a unique id.
After that weweb will render a list of containers, drop an input inside one and it will automatically rendered in all of the containers.
Then do exactly what you see in the screenshots of the mentioned post and you have the simplest example you can build.

1 Like