CODEWITHSUNDEEP
jqueryformsspringweb-applications
Kaliyug Antagonist
Kaliyug Antagonist

Reputation: 3612

Generating forms dynamically

I have attached crude images of two of the multiple forms I need to build in my web application:

Form

If I consider forms in general, it has the following elements:

  1. Checkbox
  2. Date
  3. DateTime
  4. File
  5. Image
  6. Password
  7. Radio Button
  8. Text Box
  9. Label
  10. Text Area
  11. Time
  12. Link

I was wondering if there could be a way where I could store the structure/meta-data of all the forms somewhere(config. file, database etc.) and depending upon some action, generate the form, on-the-fly based on the meta-data - the user will simply input the values. I went through several topics like this and this but couldn't find the answer. Assuming it is possible, how to structure the stored elements so that they are rendered properly in the generated page/form, how to store the values for combo-boxes, how to make text-boxes read-only and queries like that have added to my confusion.

Please note while I'm restricted to the use of JQuery and Spring, I would also like to know the other technologies and ways,of course, to achieve the same!

Thanks and regards !

*1st edit begins

While the solution provided by pbibergal appears to address my problem, I'm still looking forward to a some Spring-based/pure JQuery-based solution to achieve the same - I'm not sure if I would be allowed to explore and use a JS template engine !

*1st edit ends

*2nd edit begins

This is the single page where I'm trying to render the form using doT.js - am I missing some HTML tag somewhere to be passed to the js code where it can render the form?

    <html>
    <script src="../../jquery1.8.3/jquery-1.8.3.js"></script>

    <script src="https://raw.github.com/olado/doT/master/doT.js">
    </script>

    <script id="form-tmpl" type="text/x-dot-template">
        {{~it.form :value:index}}
            <{{=value.element}} id="input_{{=value.index}}" type="{{=value.type}}" value="{{=value.value}}">
        {{~}}
    </script>

    <script>
    var json =  "{fileState:"Processed",reason:"",cancel:"Cancel"}";

    $(document).ready(function(){
        var tmpl = doT.template(document.getElementById('form-tmpl').text);
        $('body').append(tmpl(json));
    });
    </script>

    <body>
    </body>

    </html>

*2nd edit ends

Upvotes: 1

Views: 2354

Answers (1)

pbibergal
pbibergal

Reputation: 2921

You can use Javascript objects for storing the data. Eg.

var json = {"form": [
{
    "type": "text", "element": "input", "value": "some text"
},
{
    "type": "button", "element": "input", "value": "Click here"
}
]}

Save your data in local database like Mozilla IndexedDB or WebSQL. Another way is to save in local storage. Then build your form using javascript template engine. doT.js is good for this: http://olado.github.com/doT/

In HTML file:

<script id="form-tmpl" type="text/x-dot-template">
    {{~it.form :value:index}}
        <{{=value.element}} id="input_{{=value.index}}" type="{{=value.type}}" value="{{=value.value}}">
    {{~}}
<script/>

In JS file:

$(document).ready(function(){
    var tmpl = doT.template(document.getElementById('form-tmpl').text);
    $('body').append(tmpl(json));
});

Upvotes: 3

Related Questions