:: libs :: js-as-form

Library index

AS.form

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

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>

Downloads

All downloads are refreshed daily from the latest stable branch of Altersoftware GIT repository.

Plugins

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

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.

AS.form.addForm( asForm )

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 ).

AS.form.create( object )

Creates a whole form with one command.

The object is a key/value javascript object, optional, and all its keys are optional:

See it in action here.

AS.form.getForm( [index] )

Return the indexth AS.form object created, starting from 0.

AS.form.listForms()

Return the array of the AS.form objects created.

AS.form.plugin( uri )

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

AS.form.pluginLoader( _uri__, [mandatoryFlag], [type] )

A static method mainly used by plugins, allows loading (before onReady acts) of *.js and *.css files.

AS.form.version()

Returns version number.

Create a form, an example

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>

Version history