• Payment Plugins Poll

    We need your feedback on the need for updated payment plugins. Please go here and give us your feedback.

  • Joomla 5.1

    For running J!5.1 you must install Fabrik 4.1
    See also Announcements

  • Subscription and download (Fabrik 4.1 for J!4.2+ and J!5.1) are working now

    See Announcement
    Please post subscription questions and issues here

    We have resolved the issue with the J! updater and this will be fixed in the next release.

Javascript form plugin

  • Views Views: 15,166
  • 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