Hi there!
I am forced to deal with quite big forms - not one, multiple. Each "product" has it own form with at least 20 different fields up to about 100 fields. One field can have multiple inputs, checkboxes and so on - nested in maximum 4 levels. Same field values can affect other fields in different ways.
Until now I was building whole form by hand and playing with separate jquery for each of them. However, the forms started to be more and more complex with more dependencies between fields and each form need to be builded more than one time, because I have to integrate this product with multiple platforms, each with its own front-end layer.
What would be the best and easy way to build such forms? Lets see some requirements:
- visibility switch (mostly radio yes/no input can trigger another fieldset to show up or hide, but same thing have to be possible with any checkbox or checkboxes in a form).
- choice made on some fields can disable other radio / checkbox in a form. By disable I mean make it marked as default and impossible to uncheck - but still it need to be send in a post, so we have to manipulate "disable" property somehow.
- many fields have checkbox "other", after that we show text field. User can add multiple textboxes and delete any of them (one have to stay)
- after visibility switch, whether it is other field or any field - sometimes I need to be able to clear values in these fields if user change his previous decision so now this field shouldn't be even visable. Sometimes values shoud stay.
- after checking some checkboxes their values are populated into some sort of list, whether it is a multiselect or another checkbox field. For example: in "Category" we're checking Animals and Cars and in another field we need to display select with Animals and Cars possible to select or even checkbox list with another question nested.
- submitted form is saved in ONE field as a serialized list so we can't simple populate model in laravel collective way. Need to find a way to easy load params back to the form when user click "change data" - form should be populated as it was last time he submitted.
- original app right now is built with zend framework (it will be moved one day). By that I can't relay too strong on laravel blade as it can't be used everywhere. It should be quite universal html markup, but yet - still to maintain. I.e. in laravel edition of app I made myself few components like "checkbox", "radio-yesno" and just using that to generate form. If I need to change some styling - I would do this only once. So it would be nice to i.e. build one universal form once and then depending on need - wrap each field type in custom markup by using js template.
I'am thinking of using vue.js instead of heavy relay on jquery, however I don't have enough time to learn it step by step, so if it is the way I would need some examples which ilustrate my very issues rather than just simple "use js framework for that".
That's it.
Thanks in advance! :-)