1. Fabrik 3.7 is now available. This version contains critical security updates, please update as soon as possible. Please remember to backup your site before updating, we also recommend testing your updates on development sites if possible.
  2. We had to restore the site around midday (CST) on Wed 7/26 from a backup approximately 8 hours old. So a few posts in the forums were lost. You may want to check to see if you need to re-post anything.
  3. The release of Fabrik for J! 3.8 is not yet ready. Do not update your sites to J! 3.8 until this notice is removed.

Form Javascript

Jan 8, 2017
Form Javascript

  • Form view (top)

    A form has an instance of a Javascript class, called 'fabrikForm' which manages how it behaves. As you can have more than one form on a given page (e.g. if you have a module alongside your main form) each form instance can be identified with the variable:
    Code (Javascript):

    Fabrik.blocks['form_1']
     
    where the '1' refers to the form's id.

    In 3.1 we have added an additional row identifier when editing records,
    Code (Javascript):

    Fabrik.blocks['form_1_2']
     
    Where 2 is the row id.

    So for Fabrik 3.1 onwards, to facilitate things you can get access to either form_1_x or form_1 by using this syntax:

    Code (Javascript):

    var form = Fabrik.getBlock('form_1');
     
    See http://fabrikar.com/forums/index.php?wiki/javascript/ for more information

    The form.js file can be found in media/com_fabrik/js/form.js

    Most elements in the form, will also have their own instance of a Javascript class. These are found in
    plugins/fabrik_element/​

    The form contains a mootools hash object called formElements which contains all of the element js instances, keyed on the full element name.

    Thus to get an element instance you can use:
    Code (Javascript):
    form_1.formElements.get('tablename___elementname')

    Details view (top)

    A details view has an instance of the 'fabrikForm' javaScript class but is referenced with the variable
    Code (Javascript):
    details_1
     
    where the '1' refers to the form's id.

    Code (Javascript):
    details_1.formElements.get('tablename___elementname');
    Stopping the enter button from submitting the form

    Selecting a radio button/checkbox in JS

    Adding Javascript to a Form Header (top)

    Create a form_XX.js file in components/com_fabrik/js, where XX is your numeric form ID, and put your functions in there, then just call the functions from your element JS actions.

    Using one variable to reference the form and details object (top)

    We have separate object names for the details and form view as there may be occasions where you have both present on the same page.

    However, if you are only showing a details or a form view then it will make your js more robust if you assign a reference from one to the other. For example if you are on a details page and your javascript makes use of the form_X variable it will not work as form_X is not defined. To get round this, you can assign details_X to form_X use this code in your XX.js file:

    Code (Javascript):
    if (!Fabrik.blocks.has('form_X')) {
        form_X = details_X;
    }

    Running code in either the details or the form view (top)

    Code (Javascript):
    if (Fabrik.blocks.has('form_X')) {
        // do code for the form view
    }
    if (Fabrik.blocks.has('details_X')) {
        // do code for the details view
    }

    Watching Events Triggered By the Form (top)

    In fabrik 3+ only, you can attach observer code to events triggered by the form, see this page for more info

    Accessing sub elements in checkboxes/radio buttons (top)

    Code (Javascript):
    var subElements = form_X.formElements.get('tablename___elementname').subElements
    Replace X with your form's id
    Replace tablename___elementname with the full element name

    subElements is an array of html input elements, to access the first subElement, you could do:
    Code (Javascript):
    var firstCheckBox = subElements[0];

    Getting an Elements value (top)

    Code (Javascript):
    //when in a form view
    form_4.formElements.get('tablename___elementnane').getValue();

    //when in a details view
    details_4.formElements.get('tablename___elementname').getValue();

    Accessing All Elements in a Repeat Group (top)

    Code (Javascript):
    var elements = $('groupX').getElements('input[name*=tablename___elementname]');
    Replace X with your group id

    The getElements part will get all inputs with a name which contains tablename___elementname, replace 'tablename___elementname' with the full element name that you wish to access.

    The variable 'elements' will be an array containing each of the repeated elements.

    If you want to do the same thing for select lists the code would be:
    Code (Javascript):
    var elements = $('groupX').getElements('select[name*=tablename___elementname]');

    Adding a Repeat Group Counter and alternate row0, row1 class names to repeating groups (top)

    The js code would look like this (requires you to have J1.5.20 and the mootools system upgrade plugin installed):
    Code (Javascript):
    function repeatGroupLabel(){
        //get the number of repeating sub groups:
        var c = $('groupX').getElements('.fabrikSubGroup').length;

        //iterarte over each subgroup
        document.id('groupX').getElements('.fabrikSubGroup').each(function(t, x){

            //set the class name for the repeating sub group
            //will create alternate row0, row1 classes
            t.className = 'fabrikSubGroup row'+ (x%2);

            //remove any previously created group numbering
            t.getElements('.groupnum').destroy();

            //insert 'group X of Y' under the repeat group buttons ([+] / [-])
            new Element('div', {'class':'groupnum'}).setText('group ' + (x+1) + '/' + c).injectInside(t);
        });
    }

    //run the function when your page loads
    window.addEvent('domready', function(){
        repeatGroupLabel();
    });
    Replace 'X' with your group id

    Place the code in your form's Y.js file where Y is the form's id.

    The edit the repeating group in Fabrik's admin and in the 'Javascript to run when repeat group added' and 'Javascript to run when repeat group removed' fields add:
    Code (Javascript):
    repeatGroupLabel();

    Totaling Quantity and Prices (top)

    You'd need to add an onchange js event to the quantity/price fields

    Calculating Cost (top)

    Create a js file for the form then create a function in this file:
    Code (Javascript):
    function sum() {
        var q = form_X.formElements.get('tablename___quantity').getValue();
        var p = form_X.formElements.get('tablename___price').getValue();

        var t = parseFloat(q) * parseFloat(p);

        form_X.formElements.get('tablename___cost').update(t);
    }
    Replace X with your form id

    Then in each of your quantity and price elements add an onchange event:
    Code (Javascript):
    sum();

    Calculating Cost in a repeat group (top)

    In each of your qty and unit_price elements add an 'onchange' JS with the following code:
    Code (Javascript):

    var i = this.id.match(/_(\d+)$/)[1];
    document.id('join___12___order___total_'+i).value = parseFloat(document.id('join___12___order___qty_'+i).value) * parseFloat(document.id('join___12___order___unit_price_'+i).value);
    Replace '12' with your join id (execute your form and look at the code to find this ID)

    Replace 'order' with your table name.


    To manage the ID of the repeating group you can also use
    Code (Javascript):

    var i = this.getRepeatNum();
     
    (Found in this post)