HTMLForm

API Reference

Overview

Though the Webix library has its own Form component, there exists a possibility to create a separate form made with the help of pure HTML. This is done within the special HTMLForm component.

Initialization

There are three ways of embedding a form into the component:

1 . Through the "content" property:

Content property may either point the ID of DIV container where the form lies or to document.body if it is included directly into your web page body.

HTMLForm, content

<div id="areaA">
    <input type="text" name="title" value="" placeholder="Book title" /><br/>
    <input type="text" name="author" value="" placeholder="Author" /><br/>
</div>
<script type="text/javascript">webix.ui({
    view:"htmlform",
    //coincides with id of a *div* container 
    content: "areaA",
    //or, in case the form isn't included into any div
    content: document.body
});
</script>

2 . With the help of the "template" property:

Template value may include the ID of a DIV container where form fields lie

HTMLform, template

<div id="tpl">
    <input type="text" name="title" value="" placeholder="Book title" /><br/>
    <input type="text" name="author" value="" placeholder="Author" /><br/>
</div>
<script type="text/javascript">
webix.ui({
    view:"htmlform",
    template: "html->tpl", //coincides with id of a *div* container
    ...
});
</script>

or it points to external HTML file with form markup:

HTMLform, HTTP

webix.ui({
    id: "htmlform1",
    view:"htmlform",
    template: "http->data/form.html",
    ...
});

Related sample: Using HTTP-template

3. Initialization from an external file loaded by Ajax.

webix.ui({
    view:"htmlform",
    src:"myform.php"
});

Working with HTMLform

Sending Form Data

Form data can be sent to server in either of the following ways:

1 . Using Webix Ajax helper:

webix.ajax().post("some.php", form.getValues()); 
//with callback
webix.ajax().post("some.php", form.getValues(), function(text, data, xhr){ });

2 . Using webix.send method that emulates HTML form submitting:

webix.send("come.php", form.getValues());

3 . Indirectly, via the bound master component or DataCollection:

The method is good when the form is used for editing the data of the main component (datatable, tree, list, etc.). In this case not the form data matters but the data of the main component. Form saves the data to the master component while the master handles the server side part.

// data from the selected list item is pushed to the form
form.bind(list);
 
// pushes the data back to the list item
form.save()

Data binding concept is described in a separate documentation article.

UI-related Form