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