What It Does

JS Callback Logic lets you:

• Listen for changes on any field (select, input, checkbox, etc.)
• Bind one or more JavaScript functions to that change event
• Dynamically modify the DOM or field behavior
• Load external JS libraries to enhance interactivity
• Write modular callback functions for reuse

This bridges the gap between static form rendering and dynamic client-side logic.

How to Set It Up in JCB

• Go to any Field inside an Admin or Site View
• Scroll to the Script tab
• Add the callback code in the JS Callback field
  • You can also define the callback as a named function in a JS library and simply call it
• Use $this or document.querySelector for scoped manipulation

The JS you write here is injected inline or loaded via JCB's compiled view logic.

Examples

Here are a few typical use cases:

🎛 Conditional Visibility

Show a field only if another field equals "Yes"

document.querySelector('#jform_enable_extra').addEventListener('change', function () {
  const display = this.value === '1' ? 'block' : 'none';
  document.querySelector('#jform_extra_details').closest('.control-group').style.display = display;
});

🔁 Recalculate Fields on Input

Recalculate a field when another field is updated

document.querySelector('#jform_quantity').addEventListener('input', function () {
  const unitPrice = parseFloat(document.querySelector('#jform_price').value || 0);
  document.querySelector('#jform_total').value = (unitPrice * this.value).toFixed(2);
});

📦 Load Fields Dynamically

Load new field options via AJAX based on another field’s value

$('#jform_category_id').on('change', function() {
  const categoryId = $(this).val();
  $.get('/index.php?option=com_mycomp&task=ajax.loadSubfields&id=' + categoryId, function(data) {
    $('#jform_subfield_id').html(data);
  });
});

Where It Works

• ✅ Admin Views
• ✅ Custom Admin Views
• ✅ Site Views
• ✅ Dynamic Field Types
• ✅ Templates and Layouts via JS-injected Libraries

Best Practices

• Keep JS modular — reference external functions where possible
• Use event delegation for dynamically rendered fields
• Namespace your JS functions to avoid collisions
• Test in multiple Joomla versions (J4, J5) for compatibility

Bonus: JS Callbacks + Snippets

JS logic can also be included in Layout Snippets or Template Snippets if more complex interactions are needed. These JS snippets can be reused across views and linked conditionally via GUI.

Summary

This feature allows you to define JavaScript functions that are triggered when field values change in your backend (admin view) or frontend (site view) forms. It's a powerful way to inject behavior like conditional visibility, dynamic validation, or real-time UI feedback — all through JCB's GUI.