1

Dynamic Web Form, fields can be nested to an arbitrary depth, also add / remove...

 2 years ago
source link: https://www.codesd.com/item/dynamic-web-form-fields-can-be-nested-to-an-arbitrary-depth-also-add-remove-fields-dynamically.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Dynamic Web Form, fields can be nested to an arbitrary depth, also add / remove fields dynamically

advertisements

I am trying to build a web form which will have its initial fields determined based on rows in a database. For example, form 1 might have fields A, B, and C. On the other hand, form 2 might have fields D, E, and F. Additionally, there may be hundreds or even thousands of such forms, each with a unique ID.

Now, each one of these fields (A, B, C, etc) might in turn be made up of other fields, which in turn can be made up of yet even more fields. In other words, some fields are actually collections of fields (to an arbitrary depth).

On top of that, the user of the form can choose to add more instances of some of these fields at runtime. Sometimes the user will choose to add a whole new record (all fields) while at other times they may choose to only add another instance of one of the fields (which may itself contain more fields). Also, I need the user to be able to remove any of these fields that they have added.

I've spent about 30 hours so far along with a colleague of mine coming up with a custom Javascript-based solution that involves building our own tree structure alongside the DOM tree, writing some recursive functions, etc but, as the complexity has mounted, it really seems like we were reinventing the wheel here. This strikes me as a problem that must have already been solved at this point.

I'm not very familiar with jQuery but it sounds like it might potentially be a good solution based on what I've heard about it in the past. In other words, I suspect that this might be a problem that jQuery more or less solves "out of the box." But, my initial research into jQuery (on Stack Overflow and on Google in general) gives me the impression that this isn't the case and that a custom solution, using jQuery, needs to be put together.

My question is, what is the easiest way to achieve what I'm looking for? The solution doesn't even have to use jQuery; I just thought that jQuery might be the best way to do it. I'm not looking for someone to write the code for me, just to point me in the right direction since our solutions so far have looked pretty messy.


I would recommend checking KnockoutJS. With this Jquery plugin you can dynamically add or remove to you DOM using ko if: comments. Also, you can simply show or hide elements by using the visible data-bind. I would recommend checking out their tutorials the collections sections should give you a good start on how to implement what you are trying to.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK