Form Javascript

  • Views Views: 40,875
  • 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:

    where the '1' refers to the form's id.

    In 3.1 we have added an additional row identifier when editing records,

    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 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

    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:

    Details view​

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


    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:

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

    Running code in either the details or the form view​

    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​

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

    Getting an Elements value​

    //when in a form view

    //when in a details view

    Accessing All Elements in a Repeat Group​

    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:
    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):
    function repeatGroupLabel(){
    //get the number of repeating sub Groups:
    var c = $('groupX').getElements('.fabrikSubGroup').length;

    //iterarte over each subgroup'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

    //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(){

    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:

    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:
    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);


    Replace X with your form id

    Then in each of your quantity and price Elements add an onchange event:

    Calculating Cost in a repeat group​

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

    var i = this.getRepeatNum();'order___total_'+i).value = parseFloat('order___qty_'+i).value) * parseFloat('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

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