Joomla Component Options: How to call custom javascript function before the component options form is posted

Joomla component options

Ever wondered how to call custom javascript function before the component options form is posted when working with Joomla backend?

So, I had a situation when I wanted to call my own Javascript function before the component options form is submitted in Joomla backend.

So here is a one way that I found.

1. First find the "Save" and "Save and Close" buttons from toolbar

2. Change their "onclick" attributes to call your custom javascript code before form is submitted.

Here is a quick code snippet for that-

jQuery(document).ready(function(){
 /*Let's trick Joomla toolbar buttons Joomla 3.x*/
 
 /*Find Save button and change its onclick attribute
 by prepending its value with a call to your own javascript function*/
 jQuery("button[onclick=\"Joomla.submitbutton('config.save.component.apply')\"]").attr("onclick", "customFieldsValidation();Joomla.submitbutton('config.save.component.apply')");

 /*Find Save and close button and change its onclick attribute
 by prepending its value with a call to your own javascript function*/
 jQuery("button[onclick=\"Joomla.submitbutton('config.save.component.save')\"]").attr("onclick", "customFieldsValidation();Joomla.submitbutton('config.save.component.save')");
});

I hope this helps!