Form Javascript Objects

  • Views Views: 21,809
  • Last updated Last updated:
  • Introduction​

    The way form JS is handled has changed in Fabrik 3.x. To interact with a Fabrik form you now add event listeners in your custom Javascript files.

    Alternatively write your js inside your form templates.

    Form Events​

    When various actions are performed by a Fabrik form, it fires events (much in the same way that a mouse click broadcasts a mouse click event). You can then write Javascript code to listen and run on the broadcast of these events:
    Fabrik.addEvent(eventName, function(form){
    // do your code here

    Possible Options for eventName (passed in variables shown in brackets)
    • fabrik.form.doelementfx (form)
    • fabrik.form.loaded (form) - run when form loaded, before Elements added
    • fabrik.form.elements.added (Elements) // All Elements have been added to the form's formElements property
    • (form)
    • (form)
    • (form, json)
    • (form, event)
    • (form, event, groupId, repeatCounter)
    • (form, event)
    • (form, event, groupId, repeatCounter)
    • fabrik.form.submit.start (form, event, button)
    • fabrik.form.submitted (form, json to update) - only called when form is saving using ajax
    • fabrik.form.submit.end (form)
    • fabrik.calc.update (form) - run when Elements calc update triggered
    • fabrik.form.update (form, json)
    • fabrik.form.reset (form)
    • fabrik.form.delete (form, rowid)
    • (form, dir) - run when the next/previous button is pressed on a multipage form, before the page is changed. (dir option added 17/04/2015)
    • (form, dir) - run when the next/previous button is pressed on a multipage form, after the page is changed. (dir option added 17/04/2015)

    Group JS​

    To duplicate a Forms repeating group a certain number of times:
    // Your form reference
    var formRef = 'form_2';

    // The group you wish to repeat's ID
    var groupId = 1;

    // The number of times to repeat

    var repeatNum = 3;
    var form = Fabrik.blocks[formRef];

    // Get the repeat group button
    var btn = form.getElement('#group' + groupId + ' .addGroup');
    if (typeOf(btn) !== 'null') {

    // Create mock event
    var e = new Event.Mock(btn, 'click');

    // Duplicate group
    for (var i = 1; i < repeatNum ; i ++) {


    Stop current method from continuing​
    To stop the form from continuing its current method set the form's result property to false:
    Fabrik.addEvent('fabrik.form.submit.start', function(form, event, button) {
    alert('aha! you really should not press that button');
    form.result = false;

    Prevent form deleting​
    To stop the form from deleting:
    Fabrik.addEvent('fabrik.form.delete', function (form, rowid) {
    return false;
    // If you don't return false then the fabrik.form.submit event will be fired

    Setting end date 2 hours after the start date​
    See this mootools documentation page for more info on altering dates in Javascript.

    Apply this code to a change event on your start Date element. When it's value is changed the end date's value will be set to the start dates value plus 2 hours
    // Alter formRef and endDate to match your form's id and the end Date element's full name:
    var formRef = 'form_1';
    var endDate = 'tablename___end_date';
    var end = Fabrik.blocks[formRef].formElements.get(endDate);
    var newDate = new Date(this.get('value'));
    newDate.increment('hour', 2);

    Copying values from details view to a form​
    See this thread for an intro
    // Alter the 1 & 2 to match you form ids.
    var detailsRef = 'details_1';
    var formRef = 'form_2';

    Fabrik.addEvent('fabrik.form.Elements.added', function (block) {

    // Ensure that both the form and details view have loaded
    if (Object.getLength(Fabrik.blocks) === 2) {

    // Copy the line below and alter for each element you want to update
    copyFromDetails('userlist___name', 'tasks___username');
    copyFromDetails('userlist___surname', 'tasks___surname');

    function copyFromDetails(from, to) {
    // Get the details view and Elements:
    var fromElements = Fabrik.blocks[detailsRef].formElements;

    // Get the form and its Elements
    var toElements = Fabrik.blocks[formRef].formElements;

    // Get details value
    var fromValue = fromElements.get(from).get('value');

    // Update form element with value.

    Updating an element with the difference between two date Elements
    See here for an intro

    Say your form has an id of 1. Create a file components/com_fabrik/js/form_1.js

    And that you have 3 Elements:

    2 dates whose full names are 'tablename___date1' and 'tablename___date2' from which you want to calculate the difference.

    And a third to show the difference, 'tablename__output'

    Enter this in the js file you created above:
    Fabrik.addEvent('fabrik.form.Elements.added', function () {
    // All the elements have been loaded in Fabrik
    var form = Fabrik.blocks.form_1; // Replace 1 with your form id

    var elements = form.formElements;
    var date1 = elements.get('tablename___date1');
    var date2 = elements.get('tablename___date2');

    var output = elements.get('tablename___output');

    // A function to work out the date difference
    var doDiff = function () {
    // Create two JS date objects
    var d1 = new Date.parse(date1.get('value'));
    var d2 = new Date.parse(date2.get('value'));

    // diff in miliseconds
    var diff = d1 - d2;
    var dayDiff = diff / (24 * 60 * 60 * 10 * 10 * 10);

    // Update the output element with the number of days

    // Add events to the two dates to work out the date difference
    date1.addNewEvent('change', function (e) {

    date2.addNewEvent('change', function (e) {


    Updating an Date element with the current time when its group is repeated​
    Fabrik.addEvent('', function (form, event) {

    // Replace 204 with the repeat group's id
    var groupId = 204;

    // Get the number of times the group has been repeated
    var repeatMax = form.repeatGroupMarkers[groupId];

    // Get the newly added element
    var el = form.formElements['join___131___tablename___elementname_' + repeatMax];

    // Update the element with the current date/time
    el.update(new Date());

    Hide / Show an element located in more than one repeating group​
    // replace 1 with the form's id
    var formRef = 'form_1';

    // Replace with the element name (note it is prefixed with join___JOINID___)
    var elementName = 'join___131___regons___country_id';

    // Get the form's elements
    var elements = Fabrik.blocks[formRef].formElements;

    // Filter the form's elements to get every repeating instance of the element
    var f = elements.filter(function (element, key) {
    return key.contains(elementName);

    // Loop over each element to hide it
    f.each(function(r) {

    // OR loop over each element to show it
    // Loop over each element to hide it
    f.each(function(r) {

    Total line items and update Total element in another group​

    requirejs(['fab/fabrik'], function () {
    function total() {
    // replace 1 with the form's id
    var formRef = 'form_34';

    // Replace with the element name
    var elementName = 'quote_items___unit_price';

    // The element containing the line items total
    var totalElement = 'quotes___inv_total';

    var total = 0;

    // Get the form's elements
    var elements = Fabrik.blocks[formRef].formElements,

    // Loop over the elements and if their key contains the elementName update the total
    elements.each(function (element, key) {

    if (key.contains(elementName)) {
    v = element.get('value').toFloat();
    if (typeOf(v) !== 'null') {
    total += v;

    // update the Total element

    // Add events when adding/deleting Groups
    Fabrik.addEvent('', function (form, event) {

    Fabrik.addEvent('', function (form, event) {

    document.addEvent('blur:relay(input[name^=quote_items___unit_price])', function () {

    Exclusive Select Dropdowns​

    Sometimes you may want to have "exclusive selection" on multiple instance of the same dropdown, whereby you only allow any given option to be selected in one of them. For example, you might be booking classes, for morning and afternoon, and you have two join elements to your "courses" table, and if they select "English" for the morning, you don't want them to be able to select it for the afternoon.

    To achieve this, you would put this in your form_X.js file ...


    function doCourses(el) {
    * els is an array of the full element names of all the dropdowns
    * you want to apply the 'exclusive selection' to, and is the only thing you need to change
    var els = ['fab_lesson_bookings___morning', 'fab_lesson_bookings___afternoon'];
    els.each(function (dd) {
    if (dd != {
    thisel = el.form.formElements.get(dd).element;

    Then on your two join elements, you would add a JavaScript event, on 'click', with the code ...



    Simply replace the full element names in the 'els' array with the full element names of your elements, which could be regular dropdowns, or joins set to dropdown. The only caveat as that they need to be dientical, with the same Options in the same order. You can have any number, the example just uses two.

    List Events​

    For List javascript events -> go here