JS Tutorial
- Overview
- Documents
Boostrap Form Builder is a small plugin which creates bootstrap forms by processing user defined JSON elements.
Source: benjamincripps.com
1. INCLUDE CSS AND JS FILES
<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>
2. HTML
<div id="complexForm"></div>
3. JAVASCRIPT
$('#complexForm').bootstrapForm({
align: 'block',
formInputs: [
{type: 'text', attr: {
placeholder: 'benjamin',
validationState: 'success',
helpblock: 'enter your first name',
id: 'firstName',
name: 'inputforName',
label: 'First Name' }
},
{type: 'text', attr: {
placeholder: 'cripps',
validationState: 'success',
helpblock: 'please enter first name',
name: 'lastName',
label: 'Last Name'
}
},
{type: 'radio', attr: {
label: 'select your favorite food.',
radios: [
{ id: 'id1', name: 'radios', label: 'pizza' },
{ id: 'id1', name: 'radios', label: 'tacos' },
{ id: 'id1', name: 'radios', label: 'wings' }
]}
},
{type: 'select', attr: {
helpblock: 'I bet your favorite isn\'t listed.',
label: 'What is your favorite band?',
options: [
{value: 'value1', text: 'The Wonder Years' },
{value: 'value2', text: 'Polar Bear Club' },
{value: 'value3', text: 'Frank Turner' } ]
}
}
],
buttons: [
{ size: 'lg',
validationState: 'success',
id: 'submit',
text: 'Submit Form',
onSubmit: function(values) { console.log(values) }
},
{ size: 'lg',
validationState: 'danger',
id: 'erase',
text: 'Erase Form',
onSubmit: function(values) { alert('hi') }
}
]
});
4. EXAMPLES
Create a Form
To create a form, simply create an empty div with an ID. The form will be created and nested within that div. A functioning link rel tag pointing to a valid Bootstrap .css file is necessary for styling.
Javascript:
$('#someID').bootstrapForm({ options })
HTML:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Text Inputs
The accepted text inputs are:
- text
- password
- datetime
- datetime-local
- date
- month
- time
- week
- number
- url
- search
- tel
- color
$('#someID').bootstrapForm({
formInputs: [
{type: 'text', attr: { - required (string)
placeholder: 'placeholder', - optional ( string )
validationState: 'success', - optional (string) ( success | warning | danger )
helpblock: 'enter your first name', - optional ( string )
id: 'firstName', - *optional ( string, a random value will be assigned if undefined )
name: 'inputforName', - *optional ( string, a random value will be assigned if undefined )
label: 'First Name' } - optional ( string )
}
]
});
Selects / Multiselects
Selects and Multiselects are created using the same syntax.
$('#someID').bootstrapForm({
formInputs: [
{type: 'select', - required (string) ( select | multiple )
attr: {
name: 'SelectName', - *optional ( string, a random value will be assigned if undefined )
id: 'SelectID', *optional ( string, a random value will be assigned if undefined )
helpblock: 'I bet your favorite isn\'t listed.', - optional ( string )
label: 'What is your favorite band?', - optional ( string )
options: [ - required ( string )
{value: 'value1', text: 'The Wonder Years' }, - ( object ) { value: "", text: "" }
{value: 'value2', text: 'Polar Bear Club' },
{value: 'value3', text: 'Frank Turner' }
]
}
}
]
});
Radio Buttons
Radio buttons are generated in groups, as an array of objects. If a name is not defined, a random value will be assigned to each radio button in the group.
$('#someID').bootstrapForm({
formInputs: [
{type: 'radio', - required (string)
attr: {
helpblock: 'what is your favorite food?', - optional (string)
label: 'maybe a label?', - optional (string)
radios: [
{ id: 'id1', name: 'radios', label: 'pizza' }, - ( object ) { id: "", name: "", label: "" }
{ id: 'id1', name: 'radios', label: 'tacos' },
{ id: 'id1', name: 'radios', label: 'wings' }
]
}
}
]
});
Checkboxes
Checkboxes work exactly like radio buttons except they random names assigned will not be identical because they are independent nodes.
$('#someID').bootstrapForm({
formInputs: [
{type: 'checkbox', - required (string)
attr: {
helpblock: 'helpblocks are optional.', - optional (string)
label: 'labels?', - optional (string)
checkboxes: [
{ id: 'check1', name: 'checkboxEx', label: 'Choice' }, - ( object ) { id: "", name: "", label: "" }
{ id: 'check2', name: 'checkboxEx', label: 'Choice' },
{ id: 'check3', name: 'checkboxEx', label: 'Choice' }
]
}
}
]
});
File
Nothing funny about a file. Pretty standard.
$('#someID').bootstrapForm({
formInputs: [
{type: 'file', - required (string)
attr: {
placeholder: 'this is file upload', - optional (string)
name: 'fileuploader', - *optional ( string, a random value will be assigned if undefined )
id: 'fileId', - *optional ( string, a random value will be assigned if undefined )
helpblock: 'help!', - optional (string)
label: 'please upload' - optional (string)
}
}
]
});
Textarea
Textareas work the same way as other inputs except they also accept a 'rows' parameter which will define the height of the input.
$('#someID').bootstrapForm({
formInputs: [
{type: 'textarea', - required (string)
attr: {
placeholder: 'text here', - optional (string)
rows: '3', - *optional ( string, a random value will be assigned if undefined )
name: 'textArea1', - *optional ( string, a random value will be assigned if undefined )
id: 'textArea1', - optional (string)
helpblock: 'some text goes here', - optional (string)
label: 'textLabel' - optional (string)
}
}
]
});
Buttons
Buttons are defined in a separate array from text inputs. Users can define a custom callback function using 'onsubmit'. The single argument available for this function is the form values serialized into an array (using the jQuery .serialize() function).
$('#someID').bootstrapForm({
formInputs: [],
buttons: [
{ size: 'sm', optional (string) ( sm | md | lg ) default: lg
validationState: 'success', - optional (string) ( success | warning | danger )
id: 'submit', - *optional ( string, an ID must be defined to use the onSubmit function )
text: 'Submit Form', - optional (string) default: submit
onSubmit: function(values) { console.log(values) } - optional (function) arg: values
}
]
});
