Are form variables not visible while the form is in a collection item?

Hi,

I notice that if I place a form container inside a collection item, then I can’t see the form item variables on submit. Is this a known issue? Any way that I can workaround it?

Thank you

I don’t think it can work that way. What are you trying to accomplish?

There are workaround… but they are a bit “hacky”… You will need to bind the id of every form item with a formula to make them unique (“input1”+form.id) and refer to them with js using document.getElementById(“input1”+form.id).

If you’ve never done web development, it might be better to not use it. You can try tho.

1 Like

Ha thanks for the hack!

Im building a typical pricing page with a quantity input for each price item, and each pricing has a checkout button, so to get this quantity I put this button inside a form.

Haha I feel you man, doing the same here :laughing:
My input id bind to something like this :

image

My checkout button bind quantite parameter to this js :

return document.getElementById("kit"+context.item.data['id']).value
1 Like

No need to retrieve the input with js.
You can keep track of the values using variables and workflows.

Now on submit you can access the values:
chrome_kiGf8an4uI

12 Likes

I approved this answer :).
You can create your own variable as on objet or array, and handle the sync by yourself as dorilama explained.

2 Likes

Thank you so much, being able to bind to path is the key here

1 Like

As usual, your answer is super helpful! Thanks!

1 Like

How might I save an array as part of the object? In your example, I’d want to add id numbers to item1.

It depends on the shape of the data.

For example if the shape is

{
  "item1": {
    "ids": [1,2,3]
  }
}

and you want to replace “ids” with [4,5,6] it’s the same workflow of the example because the variable is an object and you can have an array as the value of a property in an object.

Thanks! Would it be possible to update the array with one value at a time? For example, replacing 3 with 4 in the example you gave

if you are targeting a specific item in the array you can target it with the “path” parameter in the “change variable” action. For example item1.id[2]

If you want to append to the end of the array just calculate the new array when you bind the new value:
image

Hey @dorilama ! Thanks a lot for this answer!
I followed what you did for some dynamic inputs, however one of the inputs is a date input which has an init value (today’s date) and realized that “On change” does not track the init value of the input.

If the user sees that the init value is what they already want, they may submit the form without making changes to the input field with said init value, which would thus return a value of "".

Is there a way to handle this particular scenario?
Thanks in advance!

You can initialize the variable with the default initial value of the input.
Something like this:

{
"item4":{
  "date-1":"yourinitialdate"
 }
}

Right, that’s a good workaround. However, what if I do not know yet what fields there will be?
It would be a workflow nightmare of hardcoding initial values, as opposed to just grabbing the input’s current value… I think?

For this scenario I have been attempting to use JavaScript however I have no idea how to access elements using js on WeWeb. document.getElementById(‘id’) does not work intuitively for example.

but you still need to set the initial value of the input somehow, so you know it and you can set the default value of the variable.
If the initial value changes dynamically then you can use the workflow trigger “initial value change”

Thanks a lot, I played around and worked it out!

Hey @dorilama, hope you are fine.
I’m quite new to Weweb but already quite advanced in my first project.
Have been implementing your method to update a variable from within a Rich Text that’s inside a collection and it’s working perfectly.
My question is “how do you empty the Rich Text field when I click a button”?

As an example, it could be your last GIF “Now on submit you can access the values:”, where, when you click the “submit” button, it would give the result but also empty the input fields

Is there a simple way that I missed? just tried a bunch of dirrent ways but it does not empty it

Thanks a lot
Patrick

You can use the action “change variable value” to assign an empty string to the corresponding value.
Basically you need to update the initial value of the input to ""