Button

A simple button that can have an icon. Button can be twoState and can have a badge with a number, which can be useful for displaying the number of new messages, etc.

Button control

Adding Button

You can easily add a Button control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "button",
            value: "Send",
            size: "medium",
            view: "flat",
            color: "primary"
        }   
    ]
});

Attributes

You can provide the following attributes in the configuration object of a button:

type - (string) the type of a control, set it to "button"
name - (string) the name of a control
id - (string) the id of a control, auto-generated if not set
value - (string) the value of a button
submit - (boolean) enables the button to send form data to a server
url - (string) the URL the post request with form data will be sent to (if the submit property is set to true)
Related sample: All dhxForm inputs - DHTMLX Form
width - (string) the width of a control
height - (string) the height of a control
css - (string) adds style classes to a control
disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default
icon - (string) an icon of the button
view - (string) defines the look of a button: "flat"|"link"
size - (string) defines the size of a button: "small"|"medium"
color - (string) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success"
full - (boolean) extends a button to the full width of a form
circle - (boolean) makes the corners of a button round
loading - (boolean) adds a spinner into a button
label - (string) specifies a label for a control
labelPosition - (string) defines the position of a label: "left"|"top"
labelWidth - (string|number) sets the width of the label of a control
hiddenLabel - (boolean) invisible label that will be used to identify the input on the server side
helpMessage - (string) adds a help message to a control
preMessage - (string) a message that contains instructions for interacting with the control
successMessage - (string) a message that appears in case of successful validation of the control value
errorMessage - (string) a message that appears in case of error during validation of the control value

Working with Button

You can manipulate a Button control by using methods of the object returned by the getItem() method.

For example, you can disable a control on a page:

form.getItem("button_id").disable();

List of the control methods:

disable() - disables a Button control on a page
enable() - enables a disabled Button control
isDisabled(): boolean - checks whether a Button control is disabled
setValue(value: string) - sets the value as a string for a Button control