Dynamically create JSON-based forms.
Key advantages:
See it in action here.
Version: 1.93, released on 2020-11-28
Developed and maintained by balestra
Licensed under Creative Commons Attribution 4.0 License for free personal/professional/commercial use, with attribution.
Includes some glyphicons, licensed to Marco Balestra.
Requires js-as-core and js-as-labels before loading as-form.js
Example of basic usage, loading from Altersoftware CDN:
<script type="text/javascript" src="https://cdn.altersoftware.org/js-as-core/as-core.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.altersoftware.org/js-as-labels/as-labels.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.altersoftware.org/js-as-form/as-form.js" charset="UTF-8"></script>In a easier way, using js-as-core tag modules attribute:
<script type="text/javascript" modules="labels,form" src="https://cdn.altersoftware.org/js-as-core/as-core.js" charset="UTF-8"></script>All downloads are refreshed daily from the latest stable branch of Altersoftware GIT repository.
By loading more plugin you can use more and more field types and themes, including custom fields and themes you can write on your own by extending the basic AS.form.field class or the CSS.
Several examples are provided in the Basic data types and themes file shipped with AS.form.
Static methods act on the AS.form code itself, not on the AS.form object(s) created.
The reference for methods of instance objects is here.
This is not a method to create a new form, it’s AS.form.create() or new AS.form({ options… }) — see: AS.form
Use this method only to add again to the collection an asForm object returned by asForm.destroy().
Once added again to the collection the form can be rendered using asForm.render( targetNode ).
Creates a whole form with one command.
The object is a key/value javascript object, optional, and all its keys are optional:
requires (array): the URLs of plugins to be loadedoptions: the options of the form (See: AS.form)fields (array of array): the fields to be added. Each array item is an array with the 2 or 3 values used for asForm.addField() (See: AS.form):
name (string, mandatory): the name of the fieldtype (string, mandatory): the type of the fieldoptions (object, optional): the options of the fieldtarget (string or DOM node): where the form should be renderedcallback (function or function name): the function that will be called once the process is over, will receive as argument a reference to the asForm object.values (values object): the field values to be parsed at form creation, see as.Form.parse() for details.See it in action here.
Return the indexth AS.form object created, starting from 0.
index if omitted defaults to 0 (the first AS.form, if any).index starts from end, e.g.: AS.form.getForm(-1) returns the last AS.form, if any.Return the array of the AS.form objects created.
Load an external javascript that extends AS.form, providing new features and/or field types and/or themes.
uri can be a full or relative URI, must contain at least a / character (otherwise it's searched in the same directory of as-form.js)
When adding a plugin AS.form tries also to load a CSS file (same location, “css” folder, same name and “.css” extension) and AS.labels language file (same location, “locales” folder, same name plus "-lang" and “.js” extension).
Loading default plugins is as easy as AS.form.plugin('basic'), that loads <asFormDir>/plugin/as-form-basic.js
A static method mainly used by plugins, allows loading (before onReady acts) of *.js and *.css files.
uri (String, mandatory): the absolute or relative URI of the script or CSS to be loaded.mandatoryFlag (Booloan): if true the onReady won’t take place unless load is over. Defaults to false.type (String, js or css): the type of resource on load, defaults to autodetect on uri extension.Returns version number.
See it in action here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript" src="https://cdn.altersoftware.org/js-as-core/as-core.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.altersoftware.org/js-as-labels/as-labels.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.altersoftware.org/js-as-form/as-form.js" charset="UTF-8"></script>
<script type="text/javascript">
/* <![CDATA[ */
function init() {
// Add form plugin (form types/themes)
// use AS.form.plugin( uri ) one or more times
AS.form.plugin('https://cdn.altersoftware.org/js-as-form/plugin/as-form-basic.js');
// We dynamically load plugins, we've to wait that that they're all loaded,
// so we trigger the onReady function that when load is over
// delivers a reference to the AS.form object created.
(new AS.form({ labelwidth: 140, theme: 'light' })).onReady( buildForm );
}
function buildForm( f ) {
f.addField(
'agree',
'checkbox',
{ value: 'Yes', label: 'I agree', mandatory: true }
).addField(
'test',
'hidden',
{value:5}
);
f.addField(
'hands',
'integer',
{
label: 'Hands',
title: 'Number of hands',
placeholder: 'Number of hands',
min: 0,
max: 4,
focus: true
}
);
f.addField(
'hair',
'select',
{
label: 'Hair',
options: [
{label:AS.label('selectChooseOne'),value:''},
{label:'None',value:'-'},
{label:'Dark:', options:['Black','Brown',{label:'Gray',value:'DarkGray'}]},
{label:'Light:',options:['Red','Blonde','Gray','White']},
'Other'
]
}
);
f.render('target');
}
/* ]]> */
</script>
</head>
<body onload="init()">
<div id="target">
<h1>Here the result:</h1>
</div>
</body>
</html>js-as-core tag modules attribute