1. NOTICE: If you are using Fabrik and update to Joomla 3.10, you will need to update to Fabrik 3.10. And, if you are using Fabrik, do not upgrade to Joomla 4, we do not have a supported version ready for release. More information on a release date coming soon. Also, please note that Fabrik 3.10 will not install on any Joomla sites less than 3.8.
    Dismiss Notice

Javascript form plugin

Jan 19, 2014
Javascript form plugin
  • Note this is for Fabrik 2.x ONLY.

    If you are using Fabrik 3.x onwards please see Fabrik 3 form javascript


    Similar to the Run PHP plug-in, the Run JS plug-in allows you to attach an instance of a javascript class to your form.
    The JavaScript files need to be stored in components/com_fabrik/plugins/form/fabrikjs/scripts.
    Each file should contain a class with the same name as its filename, so if for example our file name was dostuff.js then its class should be created as below:

    Code (Javascript):

    var dostuff = new Class({
    initialize: function(form)
    this.form = form;
    //the form js object
    The JavaScript object that controls the form initiates the form plug-in, passing itself into the required initialize method.
    When the form performs various actions, its JavaScript object calls a corresponding method in all of the form JS plug-ins attached to it.
    There is an example.js file in the plug-in which contains a list of each of these possible methods. For reference it has been included below:

    //class name needs to be the same as the file name
    Code (Javascript):

    var example = new Class({
    initialize: function(form)
    this.form = form; //the form js object
    //run when submit button is pressed
    onSubmit: function(){
    //return false if you want the form to stop submission
    //run once the form has sucessfully submitted data via ajax
    onAjaxSubmitComplete: function(){
    onDoElementFX: function(){
    //run at the start of saving a group to the db
    // when you move from one group to another on
    //multipage forms
    saveGroupsToDb: function(){
    //run once the ajax call has completed when moving from one group to another
    //on multipage forms
    onCompleteSaveGroupsToDb: function(){
    //run each time you move from one group to another on
    //multipage forms
    onChangePage: function(){
    //run if the form has ajax validaton
    //run at start of element validaton that occurs on that elements onblur event
    onStartElementValidation: function(){
    //run when above element validation's ajax call is completed
    onCompleteElementValidation: function(){
    //called when a repeatable group is deleted
    onDeleteGroup: function(){
    //called when a repeat group is duplicated
    onDuplicateGroup: function(){
    //called when the form gets updated
    onUpdate: function(){
    //called when the form is reset
    onReset: function(){