Intermediate

HTMLForm and Form Treatment

The most commonly used methods here include:

setValues()

Sets all the form values in one scope.

1. The first parameter is an object than contains "property-value" pairs, where new values are assigned to the form elements. Form elements (text fields, radios and checkboxes) are referred to by their names.

webix.ui({
    rows:[
        { view:"form", id:"myform", elements:[
            { view:"text", name:"field_a", label: "from", value: "Madrid"},
            { view:"text", name:"field_b", label: "to", value: "Milan"}
        ]},
        { view:"button", label: "Fill form", click:set_form }
    ]
});
 
function set_form(){
    $$("myform").setValues({
        field_a: "London",
        field_b: "New York"
    });
};

2. The second parameter is optional and is responsible for form update.

By default it is false meaning that, even if you update only one field (e.g. "field_b"), data from the other fields will be irretrievably cleared. Pass true to update the desired field(s) and preserve data from the other.

// the value for field_a is lost!
$$("myform").setValues({ field_b:"Paris" }); 
 
// the form is updated with the specified value, the value for field_a is preserved
$$("myform").setValues({ field_b:"Paris" }, true);

3. The third parameter, an operation config, is optional. It can be of any type (from a string to object) and will be passed to the onChange event as the last argument.

Check also the API reference to this method.

load()

Loads data from a specified data source.

The method takes 3 parameters:

url (string, function, object) - source to load data from
type (string) - data format. Specify this parameter, if the incoming data are not in JSON format
callback (function) - optional. A callback to be executed after data are loaded.

$$("myform").load("./data/book.xml", "xml", callback);

Read in-depth description of this method in the API Reference.

getValues()

Gets all the form values including those of hidden and disabled fields. In the snippet below form values are logged to the console.

webix.ui({
    view:"form",
    elements:[
        // form fields must have names for getting their values
        { view:"text", name:"login"},
        { view:"text", name:"email"}
    ]
});
 
var values = $$("myform").getValues();
console.log(values);

You can also decide whether the values of disabled and hidden fields should be included:

$$("myform").getValues({hidden:false, disabled:false});

Read more in the API reference to this method.

clear()

Clears all the form fields.

The method can take the only parameter:

config (any) - optional. An operation config.

The parameter can be of any type and is passed to the onChange event as the last argument.

$$("myform").clear();

focus()

Sets the focus on the desired field. To focus a field, pass its name to the method. If called without arguments, the focus is set on the first focusable element.

webix.ui({
    view:"form", id:"myform",
    elements:[
        { view:"text", name:"login"},
        { view:"text", name:"email"}
    ]
});
 
// sets focus into the first field (here it is "login")
$$("myform").focus();
// sets focus into the "email" field
$$("myform").focus("email");

isDirty()

Checks whether changes within form were made. The method is called before validation of the form and saving form values to the component and/or to the server.

function save_form(){
    var form = $$("form1");
    if(form.isDirty()){
        if(!form.validate())
            return false;
        form.save();
    }
 };

Related sample: Binding to List

Check the API reference to this method.

Note, that the save() method is available only for a form which is bound to a data component.

setDirty()

Marks the form as "edited".

$$("form1").setDirty();

Read more in the API reference to this method;

bind()

Binds the form to other component. In the snippet below list becomes a data source for the form. Form, in its turn, saves the changed data back to the list.

webix.ui({
    view:"form",
    id: "form1",
    elements:[
        { view:"text", name:"rank"},
        { view:"text", name:"title"}
    ]
});
 
webix.ui({
     view:"list",
     id: "list1",
     template:"#rank#. #title#",
     select:true,
     data:small_film_set
});
 
$$("form1").bind($$("list1"));

Related sample: Binding to List

When form is bound the following actions are possible:

on clicking any list item, the form is filled with the item values according to the coinciding data keys and field names
the form receives the save() method, which pushes the changed data back to list.

validate()

Checks whether the input data complies with the defined rules for the form. The rules object stores field names as keys and validation functions as their values.

Validation fails, if any of the specified fields does not comply with the rules provided.

webix.ui({
    view:"form",
    id:"myform",
    elements:[
        { view:"text", name:"rank"},
        { view:"text", name:"title"}
    ],
    rules:{
        rank:webix.rules.isNumber,
        title:webix.rules.isNotEmpty
    }
});
 
$$("myform").validate();

More info on data validation.