CODEWITHSUNDEEP
javascriptjqueryforms
Matt Brailsford
Matt Brailsford

Reputation: 2237

Javascript form generator

Does anybody know of a javascript library for auto generating a form based upon a model?

ie, given a model something like:

{
    name: "someone",
    email: "[email protected]",

}

you'd get a form like:

Name: ___________
Email: __________

Matt

Upvotes: 16

Views: 15095

Answers (6)

BuGless
BuGless

Reputation: 159

I just recently stumbled upon Metawidget mentioned above, and I must say that I'm impressed. It looks a like the proper kitchensink-solution to go for.

Then again, if you want something small and with zero dependencies, you could take a look at outperform. It's a small javascript form generator library that I recently wrote to support my own projects because I got fed up by the fact that all the form generators that I looked at either had a ton of dependencies, or were distinctly larger than my single page web-application.

Upvotes: 1

Richard Kennard
Richard Kennard

Reputation: 1325

May I humbly suggest Metawidget?

It creates UIs from JSON objects. It does not require JQuery, but has support for it. It also supports other object formats (such as JSON Schema, schemas over REST etc).

Upvotes: 0

Michael Uzquiano
Michael Uzquiano

Reputation: 409

If you're looking to generate dynamic forms using jQuery, then I'd recommend taking a look at Alpaca.

Alpaca is an open-source forms library (licensed under Apache 2). It generates forms based on JSON Schema using JavaScript and is pretty flexible so that you can register new control types, layouts, constraints and validation functions.

I think it would handle the scenario you described quite easily.

It has some nice template features (jQuery Templates), rendering engines for jQuery Mobile and a "connector" pattern so that you can read and persist form and layout definitions from a remote data source.

Note: I'm one of the developers at the company behind Alpaca. We open-sourced it because we thought it'd be great for the community. Alpaca is actively developed and we use it for our product (Cloud CMS). Others have used it for other CMS systems as well as projects backed by MongoDB and CouchDB, etc. Thus, it's had a lot of grind put into it.

Upvotes: 11

liunian
liunian

Reputation: 440

inputEx seems ok

inputEx is an open-source javascript framework to build fields and forms for web applications using the YUI3 library.

Upvotes: 1

azy777
azy777

Reputation: 3531

Try one of the below mentioned plugins

http://code.google.com/p/jquery-form-builder-plugin/

http://www.botsko.net/blog/2009/04/07/jquery-form-builder-plugin/

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Try jQuery dForm

Example:

var formdata = {
    "action" : "index.html",
    "method" : "get",
    "elements" :
    [
        {
            "type" : "p",
            "html" : "You must login"
        },
        {
            "name" : "username",
            "id" : "txt-username",
            "caption" : "Username",
            "type" : "text",
            "placeholder" : "E.g. [email protected]"
        },
        {
            "name" : "password",
            "caption" : "Password",
            "type" : "password"
        },
        {
            "type" : "submit",
            "value" : "Login"
        }
    ]
};

$("#myform").buildForm(formdata);

Builds:

enter image description here

Upvotes: 8

Related Questions