A jQuery Library which helps create Bootstrap Forms.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
test
LICENSE
README.md
jquery.bootstrap-form-builder.jquery.json
jquery.bootstrap-form-builder.js
jquery.bootstrap-form-builder.min.js

README.md

jQuery-Bootstrap-Form-Builder

A jQuery Library which helps create Bootstrap Forms. Rather than build an HTML form using bootstrap classes and like a million <divs> why not just build a JSON element? Well now you can.

For live demos and full documentation, please visit the jQuery Bootstrap Form Builder homepage.

Examples:

alt text

alt text

Documentation:

For a full list of features and methods please visit the jQuery Bootstrap Form Builder homepage.

A couple words about form "names" and "ID's"

Semantic HTML requires that form elements all have names, thus they are a required field for most instances where people need forms. But not always! So rather than require names, and throw an error if one isnt defined, the plugin will simply create a random name (and ID) which you can choose to use or ignore.

**What happens if an ID is provided but no name?** Well the plugin will use the defined ID as a 'name' for the input.

**What happens if a name is provided but no ID?** Like before, the plugin will use the defined name as an ID for the input.

By giving each element a name, the form will return meaningful data on submit (which is built into the plugin). See below for more information.

###Creating a Form

Javascript:
$('#someID').bootstrapForm({ options })

HTML:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src='../jquery.bootstrapFormBuilder.js'></script>

All Text Inputs Supported:

The plugin supports Select, Multiselect, Button, Textarea, File, Checkbox, Radio, and Text Inputs ( which includes text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color)

For information about creating individual inputs or more complex forms please visit the homepage.

Form Functions

Retrieving a bootstrap form information has never been simpler. Simply add a callback function in your JSON element, and it will be called on submit. The form values will be available as the first argument for the onSubmit function.

$('#someID').bootstrapForm({

formInputs: [],

buttons: [ 
        { size: 'lg',
          id: 'submit',
          text: 'Submit Form',
          onSubmit: function(values) { console.log(values) }
        }
]

});

The argument values is an array of objects, where each object is a form element containing the input name and value.

Questions:

If you have any questions, please contact me at ben@benjamincripps.com, or visit the plugin homepage.