icon Submit

The Submit control allows you to add Submit buttons to your forms. Works exactly as the Button control, but already has the code to submit a form.

A Submit control is added automatically to the form when you add any other element.

This page contains a detailed description of the control properties and JavaScript samples which you can use with this control.

Submit control

Properties

Here you can find properties specifically related to the Submit control.

Name

A unique identifier for the control.

Name property

JavaScript

The Name property allows to work with the control via JavaScript code, like this:

fd.rendered(function(){
    //can access the control using its Name:
    fd.control('Submit1').text = 'Send the form';
 });

Text

Allows you to type in or copy in the exact text the submit button will display on the form:

Text property

Type

Allows you to select a type of a button from available types in Bootstrap buttons:

Type property

The color and the appearance of the submit button will change depending on its type.

Click

Add JavaScript to execute when the submit button is clicked. With this property empty, the button won’t do anything.

Automatically has the following code on a submit button, you can add some code to run before it:

return fd.save();

Click code

Width

You can specify the Width of the submit button in pixels:

Width property

If left empty, the submit button will take only as much space as necessary for the text, though you can adjust it in Grid Cell properties:

Alignment and Grid Width property

Class

Add a CSS class to the control, which comes in handy with CSS or even JavaScript code. This will work as a class attribute for an HTML tag.

Control's class

The same class can be applied to multiple fields and controls, and then you can use CSS to modify the appearance of these. For example, here we’ve used the following CSS code in the CSS editor to give controls with my-class a rounded appearance:

.my-class {
    border-radius: 12px!important;
}

Control's class with CSS on the form

Style

Add custom CSS style to the control. This will work as a style attribute for an HTML tag.

Control's style

You can apply different styles to the control. For example, the following style will add a shadow under the submit:

box-shadow: 0 9px #999;

JavaScript

In this section, you can find basic examples of how to work with the control using JavaScript.

If you are not familiar with the JavaScript framework, get started with the JavaScript basics.

Note

The control is only accessible once the form is rendered, so all calls to the control must be inside fd.rendered event:

fd.rendered(function(){
    //hide the control
    $(fd.control('Control1').$el).hide();
    //show the control
    $(fd.control('Control1').$el).show();
});

Get or set text

Get or set the text of the button with the following property:

//return the text as a string
fd.field('Control1').text;

//set the text
fd.control('Control1').text = 'New text for the submit button';

Get HTML element

Access HTML element inside the control in order to modify it, hide it, or do something else.

//access control's HTML
var htmlControl = fd.control('Control1').$el;

Get or set script that runs on click

Property that holds JavaScript that is executed when the submit button is clicked:

//get the script that runs on click
fd.control('Control1').onclick;

//set the script that runs on click
fd.control('Control1').onclick = 'alert("Submit is clicked!"); return fd.save();';

//trigger the code to run with JavaScript
fd.control('Control1').click();