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

Javascript form plugin

  • Views Views: 14,710
  • Last updated Last updated:

Navigation

         Form Article Plugin Tutorial
      Autofill form plugin
      Clone form plugin
      Comment form plugin
      Email form plugin
      EXIF form plugin
      FTP form plugin
      J2store form plugin
      Kunena form plugin
      Limit form plugin
      Logs form plugin
      Mailchimp form plugin
      Paginate form plugin
      Paypal form plugin
      PHP form plugin
      Pingdotfm form plugin
      Receipt form plugin
      Redirect form plugin
      REST form plugin
      Slack form plugin (+)
      SMS form plugin
      Twitter form plugin
      Upsert form plugin
      VBforum form plugin
      Create a Search Form
      Accordion Form Groups
  • Note this is for Fabrik 2.x ONLY.

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

    Form-edit-plugin-js.png



    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:



    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

    var example = new Class({
    initialize: function(form)
    {
    this.form = form; //the form js object
    },
    //run when submit button is pressed

    onSubmit: function(){
    alert('onSubmit');
    //return false if you want the form to stop submission
    },

    //run once the form has sucessfully submitted data via ajax

    onAjaxSubmitComplete: function(){
    alert('complete');
    },

    onDoElementFX: function(){
    alert('onDoElementFX');
    },
    //run at the start of saving a group to the db
    // when you move from one group to another on
    //multipage Forms

    saveGroupsToDb: function(){
    alert('saveGroupsToDb');
    },
    //run once the ajax call has completed when moving from one group to another
    //on multipage Forms
    onCompleteSaveGroupsToDb: function(){
    alert('onCompleteSaveGroupsToDb');},
    //run each time you move from one group to another on
    //multipage Forms
    onChangePage: function(){
    alert('onChangePage');
    },
    //run if the form has ajax validaton
    //run at start of element validaton that occurs on that Elements onblur event
    onStartElementValidation: function(){
    alert('onStartElementValidation');
    },
    //run when above element Validation's ajax call is completed
    onCompleteElementValidation: function(){
    alert('onCompleteElementValidation');
    },
    //called when a repeatable group is deleted
    onDeleteGroup: function(){
    alert('onDeleteGroup');
    },
    //called when a repeat group is duplicated
    onDuplicateGroup: function(){
    alert('onDuplicateGroup');
    },
    //called when the form gets updated
    onUpdate: function(){
    alert('onUpdate');
    },
    //called when the form is reset
    onReset: function(){
    }
    });
Back
Top