...Or you can just do it all with javascript/jQuery and css - and avoid having to make changes to any of the Fabrik core code, templates, or layouts.
Examples of code included in the form_xx.js file...
If the form is new, hide Submit button and fix the border radius of the remaining apply button...
Hide apply button and fix the border radius of the Submit button...
Switch the order of the Submit/apply buttons (it looks like Fabrik will take care of the border radius so long as both Apply and Submit is shown)...
Insert a button after the control-group div of an element
Change the HTML of the Goback button to redirect to a certain page...
Add a class to a button for css styling...
If you use the php form plugin for post processing, you can add a certain value to a button to help identify code that needs to be run in a certain situation, or where to redirect.
You will know which 'submit' button was clicked because it will be a key name included in the form $data. For example, if apply was clicked there will be a $data['apply']-> and if Submit was clicked there will be a $data['Submit']->
(or if the last example was used you will see $data['Submit']->toList )
The general rule is the apply button submits the form and returns to the same form/page (unless changes to certain watch elements apply/'kick in' access restrictions which prevent that, in which case the view is changed to details rather than edit) - while the Submit button saves the form and returns to the list view (unless redirected).
Examples of code included in the form_xx.js file...
If the form is new, hide Submit button and fix the border radius of the remaining apply button...
JavaScript:
if (jQuery("tablename___id").val()==""){
jQuery("button[name='Submit']").hide();
jQuery("button[name='apply']").css({"border-top-left-radius":"4px","border-bottom-left-radius":"4px"});
}
Hide apply button and fix the border radius of the Submit button...
JavaScript:
jQuery("button[name='apply']").hide();
jQuery("button[name='Submit']").css({"border-top-right-radius":"4px","border-bottom-right-radius":"4px"});
Switch the order of the Submit/apply buttons (it looks like Fabrik will take care of the border radius so long as both Apply and Submit is shown)...
JavaScript:
jQuery("button[name='Submit']").insertAfter(jQuery("button[name='apply']"));
Insert a button after the control-group div of an element
JavaScript:
jQuery("div.fb_el_tablename___elementname").after('<button type="button" class="btn button" onclick="parent.location=\'https://www.yourdomain.com/page-alias\'" name="TestButton">ButtonLabel</button>');
Change the HTML of the Goback button to redirect to a certain page...
JavaScript:
jQuery("button[name='Goback']").closest("div").html('<button type="button" class="btn button" onclick="parent.location=\'https://www.yourdomain.com/page-alias\'" name="Goback"><i data-isicon="true" class="back"></i> Cancel/Go back</button>');
Add a class to a button for css styling...
JavaScript:
jQuery("button[name='apply']").addClass("isnew");
CSS:
button.isnew {
background: darkgreen;
}
If you use the php form plugin for post processing, you can add a certain value to a button to help identify code that needs to be run in a certain situation, or where to redirect.
JavaScript:
jQuery("button[name='Submit']").prop("value","toList");
(or if the last example was used you will see $data['Submit']->toList )
The general rule is the apply button submits the form and returns to the same form/page (unless changes to certain watch elements apply/'kick in' access restrictions which prevent that, in which case the view is changed to details rather than edit) - while the Submit button saves the form and returns to the list view (unless redirected).
Last edited: