Category: JavaScript
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Adding container in form removes input fields from form parameters

Issue

I added containers to my form for better visualization but now I can't use the input fields within the containers in my JS conditional show for the button. The expected behavior doesn't work with containers and even typing in the input field name doesn't solve the issue. It's difficult to remove the containers and it looks bad without them. I'm not sure if this is a bug or if I shouldn't be using containers for UX.

Resolution

The issue reported is that the input fields within containers on a form are not being recognized in the JS conditional show for a button. This is because the elements inside a container don’t work as child widgets, and therefore cannot be referenced like the inputs outside the container.

One solution suggested is to use the JSON form instead of the regular form. JSON forms allow more flexibility in creating custom forms, and the input fields can be formatted however necessary.

Another suggestion is to avoid using containers for UX, as they may cause issues with referencing input fields in the form. Instead, consider using other design elements such as sections or tabs to organize the form fields.

It is important to note that the specific solution may vary depending on the context and requirements of the project.