javascriptjquerydynamicform-generator

How to generate a dynamic form using javascript/jQuery?


I need to generate an entire html form dynamically based on the Ajax response from server. In response there will be information like input type , input labels, validations if any etc.

The form at most will always have ten fields.

Is there any jQuery/ javascript tool/plugin to generate the form?

Thanks.


Solution

  • Formation

    From their example:

        value = {"key":"value"} "key" will be the value attribute and "value" will be the shown value of the element. If the array is constructed like {"value",value","value"} (without keys) then the value attribute of the input will be an auto-incremented number starting from 0.
    options = {} See options table below.
    
    $.fn.formation(options); [Create a form]
    $.formation.addInput(options); [Append an input]
    $.formation.addSelect(values,options); [Append a select]
    $.formation.addTextarea(options); [Append a textarea]
    $.formation.addCheckboxes(values,options); [Append an unordered list of checkboxes]
    $.formation.addRadios(values,options); [Append an unordered list of radio buttons]
    $.formation.addCaptcha(options); [Adds a captcha question to your form]
    $.formation.addButton(options); [Append a button]
    $.formation.setErrorMessages(options); [Set custom error messages for validation]
    

    However, this is all stuff you can easily do with Jquery, and it is a good learning experience so I recommend trying it yourself.