Intermediate

HTMLForm and Form Treatment

The most commonly used methods here include:

setValues()

Sets all the form values in one scope. Its argument is an object than contains 'property-value' pairs where new values are assigned to form elements.

Form elements (text fields, radios and checkboxes) are referred by either 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"
    });
};

There's a second parameter for the function that is responsible for further form updates.

By default, it is false, which means that if you apply this function with a value just for one field, it will override the previously set values and they will be lost in nowhere. set to true, it allows for updating existing values with new ones.

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

Check also the API reference for this method.

load()

Loads values from a data file. Here you should pass the path to a data file as well as data format into the function.

function load_form() {
    $$('myform').load("./data/book.xml", "xml");
}

getValues()

Gets all the form values including those of hidden and disabled fields. In the snippet below form values are pasted into the console log.

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

You can also specify whether to include values of disabled and hidden fields into the result:

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

Check also the API reference for this method.

clear()

Clears all the form fields.

function clear_form() {
    $$('myform').clear();
}

focus()

Sets the focus into the desired field. If used without arguments sets focus into the component it's called from. In case the item's ID is passed into the function, the corresponding item gets focus.

<input type="button" value="Focus author" onclick="focus_form('author');" /> //htmlform
<input type="button" value="Focus genre" onclick="focus_form('genre');" />
 
...
function focus_form(item) {
    if (!item)
        $$('htmlform1').focus();
    else
        $$('htmlform1').focus(item);
}

Related sample:  Initialization in Document Body

isDirty()

Checks whether changes within form were made. The method is called before validation the form and saving form values and/or sending them to 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 for this method.

setDirty()

Marks the form as 'edited'.

$$('form1').setDirty();

Check the API reference for this method;

bind()

Binds the form to other component. In the snippet below list becomes a data source for the form as well as helps save data from the form into the component.

More info on Data Binding

<div>
    <input type="number" name="rank" />
    <input type="text" name="title" />
    <input type="date" name="year" />
</div>
<script type="text/javascript">
webix.ui({
    view:"list", 
    template:"#rank#. #title# Year:#year#"})
 
$$('htmlform1').bind($$('list1'));
//on clicking any list item the form is filled with the same values
</script>

Related sample:  Binding to a native HTML form

validate()

Checks where the input data complies with the defined rules for the form.

More info on data validation.

Don't forget to specify the ID of a form / htmlform to enable this functionality since the ID is used to call these functions.

Back to top