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

**URL:** <https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138>\
**Category:** Ask us anything\
**Tags:** collection-page\
**Created:** [September 17, 2022, 10:53am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138 "2022-09-17T10:53:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![liweihan](https://avatars.discourse-cdn.com/v4/letter/l/a6a055/32.png) [@liweihan](https://community.weweb.io/u/liweihan)\
**Post date:** [September 17, 2022, 10:53am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/1 "2022-09-17T10:53:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [September 17, 2022, 11:27pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/2 "2022-09-17T23:27:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stagiaire](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/stagiaire/32/1199_2.png) [@stagiaire](https://community.weweb.io/u/stagiaire)\
**Post date:** [September 19, 2022, 6:23am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/3 "2022-09-19T06:23:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![liweihan](https://avatars.discourse-cdn.com/v4/letter/l/a6a055/32.png) [@liweihan](https://community.weweb.io/u/liweihan)\
**Post date:** [September 19, 2022, 9:17am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/4 "2022-09-19T09:17:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![stagiaire](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/stagiaire/32/1199_2.png) [@stagiaire](https://community.weweb.io/u/stagiaire)\
**Post date:** [September 19, 2022, 9:28am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/5 "2022-09-19T09:28:52Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c4b35680c9c46ee5f536d475ac6710824bafaf12.png)

My checkout button bind quantite parameter to this js :

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

```

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [September 19, 2022, 10:17am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/6 "2022-09-19T10:17:48Z")

</div>

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

- create a variable of type object  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/705b66359d6609baa791a4a649281b273bb2ece1.png)
- on your inputs add a workflow triggered on change where you change the variable  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/204a5165ea9787c9c2311f6d230887e4f61b80d1.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fc46e5812d79551fbe3b0c4668a27d6560ef6cea.png)

Now on submit you can access the values:  
 ![chrome_kiGf8an4uI](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/319b2dd3f16f62a22658a2a6fc6f56af0daa27d0.gif)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [September 19, 2022, 12:30pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/7 "2022-09-19T12:30:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![liweihan](https://avatars.discourse-cdn.com/v4/letter/l/a6a055/32.png) [@liweihan](https://community.weweb.io/u/liweihan)\
**Post date:** [September 20, 2022, 10:00pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/8 "2022-09-20T22:00:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [October 2, 2022, 7:58pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/9 "2022-10-02T19:58:37Z")

</div>

As usual, your answer is super helpful! Thanks!

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [October 17, 2022, 2:52am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/10 "2022-10-17T02:52:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [October 17, 2022, 9:59am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/11 "2022-10-17T09:59:00Z")

</div>

It depends on the shape of the data.

For example if the shape is

```auto
{
  "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.

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [October 17, 2022, 12:57pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/12 "2022-10-17T12:57:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [October 17, 2022, 5:25pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/13 "2022-10-17T17:25:33Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/40e996027dd382448ed44221a39e6e9ad758e1fa.png)

---

<div class="post-metadata">

**Author:** ![aeynaud](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aeynaud/32/2050_2.png) [@aeynaud](https://community.weweb.io/u/aeynaud)\
**Post date:** [January 25, 2023, 3:56pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/14 "2023-01-25T15:56:04Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [January 25, 2023, 4:34pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/15 "2023-01-25T16:34:19Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![aeynaud](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aeynaud/32/2050_2.png) [@aeynaud](https://community.weweb.io/u/aeynaud)\
**Post date:** [January 25, 2023, 4:41pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/16 "2023-01-25T16:41:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [January 25, 2023, 4:53pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/17 "2023-01-25T16:53:35Z")

</div>

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”

---

<div class="post-metadata">

**Author:** ![aeynaud](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aeynaud/32/2050_2.png) [@aeynaud](https://community.weweb.io/u/aeynaud)\
**Post date:** [January 26, 2023, 1:56am UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/18 "2023-01-26T01:56:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@Patrick](https://community.weweb.io/u/Patrick)\
**Post date:** [March 8, 2023, 4:56pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/19 "2023-03-08T16:56:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [March 8, 2023, 5:03pm UTC](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/20 "2023-03-08T17:03:48Z")

</div>

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 `""`

[Next page](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138.md?page=2)
