• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Form Javascript

  • Views Views: 40,796
  • Last updated Last updated:
  • Form view​

    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:

    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,

    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:


    var form = Fabrik.getBlock('form_1');
    See https://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:
    form_1.formElements.get('tablename___elementname')

    Details view​

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

    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​

    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​

    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:

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

    Running code in either the details or the form view​

    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​

    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​

    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:
    JavaScript:
    var firstCheckBox = subElements[0];

    Getting an Elements value​

    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​

    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:
    JavaScript:
    var Elements = $('groupX').getElements('select[name*=tablename___elementname]');

    Adding a Repeat Group Counter and
    alternate row0, row1 class names to repeating groups​

    The js code would look like this (requires you to have J1.5.20 and the mootools system upgrade plugin installed):
    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:
    JavaScript:
    repeatGroupLabel();

    Totaling Quantity and Prices​

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

    Calculating Cost
    Create a js file for the form then create a function in this file:
    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:
    JavaScript:
    sum();

    Calculating Cost in a repeat group​

    In each of your qty and unit_price Elements add an 'onchange' JS with the following code:
    JavaScript:

    var i = this.getRepeatNum();
    document.id('order___total_'+i).value = parseFloat(document.id('order___qty_'+i).value) * parseFloat(document.id('order___unit_price_'+i).value);

    Replace 'order___xy' with your full element names (Attention: keep _ after your element name)


    To manage the ID of the repeating group you can also use
    JavaScript:

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