How can I add JavaScript to my form?

Written Oct 9, 2012 05:07

In ChornoForms v4 both the Easy and normal Form Wizards have a box where you can enter JavaScript. In the Easy Wizard it is the JavaScript Code box on the Others | JS/CSS settings tab; in the normal Wizard you can click the Events tab and then drag a Load JS action from the Utilities action Group.

In ChronoForms v5 use the JS Code box on the Code tab in the Simple Wizard or, in the form Wizard, drag a Load JavaScript action into the On Load event on the Setup tab.

These boxes accept JavaScript without any <script></script> tags; and you can also use PHP to create dynamic script if you need it.

Whilst the Load JS action is usually used in the On Load event of a form you can also use it in any other event if the result will be shown in the user's browser (it makes no sense otherwise). So, for example, you can add JavaScript to a Thank You page.

You should wrap any code that refers to the form HTML in a function to make sure that it doesn't execute before the page is loaded and the HTML is available. Assuming that the MooTools library is loaded (which it will be if you are using ChronoForms validation, datepickers, etc.) then you can use this:

window.addEvent('domready', function() {
  // your script goes here
});

If MooTools is not loaded then you may need to replace 'domready' with 'load'

If you need load a JavaScript file then you can do so from an action that accepts PHP (e.g. a Custom Code action, or the Load JS action) using:

<?php
$doc =& JFactory::getDocument();
$doc->addScript('url of the file to load');
?>

Or if you want to add a JavaScript snippet from a Custom Code action you can use:

<?php
$script = "
  // your script snippet goes here
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>

Note: you need to manage any quotes in the script snippet carefully!!

FAQs