Framework | Framework

Button Chart Checkbox / Toggle Confirmation Popover DataTables DateTime Datepicker Email Error Page Error Messages Export CSV/PDF Form Upload Image/File Namespaces Number Plugins Scanner Select / Autocomplete Text / Textarea

Basic Number Input

Output: ____ // Event Type: ____

HTML

<input type="number" class="form-control" data-fd-control="number" data-fd-callback="setOutputText" data-parentID="100" />

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Number Input with Min = -10, Max = 20

Output: ____ // Event Type: ____

HTML

<input type="number" class="form-control"
    data-fd-control="number"
    data-fd-callback="setOutputText"
    data-fd-min="-10"
    data-fd-max="20"
    data-parentID="100" />

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Number Input with Precision = 2

Output: ____ // Event Type: ____

HTML

<input type="number" class="form-control"
    data-fd-control="number"
    data-fd-callback="setOutputText"
    data-fd-precision="2"
    data-parentID="100" />

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};