Simple Form Builder With JSON Schema - jQuery JSONForm
File Size: | 6.13 KB |
---|---|
Views Total: | 3871 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another JSON to Form builder that dynamically generates a Bootstrap-friendly HTML form from JSON data you provide.
Supported input types:
- String
- Password
- Text
- Currency
- Datetime
How to use it:
1. Download and place the JavaScript file jquery-jsonform.js
after jQuery.
<script src="/path/to/jquery.min.js"></script> <script src="dist/jquery-jsonform.js"></script>
2. Initialize the form builder and we're ready to go.
var formBuilder = new FormBuilder(options);
3. Prepare your form data following the JSON structure as follows:
var myData = { "name": "User", "attrs": [ { "id": "username", "name": "User Name", "type": "string", "value": "user1", "meta": { "min": 4, "max": 64, "unique": "users" } }, { "id": "email", "name": "Email", "type": "email", "meta": { "min": 4, "max": 128, "unique": "users" } }, { "id": "password", "name": "Password", "type": "password", "meta": [] } ] }
4. Create a container element in which you want to place the generated form.
<div id="example"></div>
5. Generate the form using the build
method. Possible parameters:
- method: Specify how to send your form data, POST or GET.
- action: Specify where to send your form data.
- formId: Container element.
- modelInfoJSON: JSON data.
// formBuilder.build(formId, modelInfoJSON) formBuilder.createSection('#myForm', myData);
6. Possible plugin options.
- method: Specify how to send your form data, POST or GET.
- action: Specify where to send your form data.
- buttonLabel: Submit button.
var options = { method: 'get', action: '#action', buttonLabel: 'Add' };
This awesome jQuery plugin is developed by etechfocus. For more Advanced Usages, please check the demo page or visit the official website.