How Do I Add Custom JavaScripts To Forms?

The Quik! Forms Engine is highly extensible by making it possible for customers to write and add their own custom javascript functions to use on the form. For example, perhaps you want to calculate the total value of several fields, or perhaps lookup the city based on the zip code. These types of custom features can be added to the Quik! Form at run-time with your own custom JavaScripts. This section does not discuss how to write JavaScript and only focuses on how to implement your custom script. When you write your own JavaScript be aware that Quik! is pre-integrated and already includes JQuery, a common JavaScript library. You may find it easier to make use of your script using JQuery.

Adding A Custom Function

The simplest approach is to build a custom JavaScript function that performs some action on the form. You can do this by writing your script and then adding it to the CustomJavaScript property in the Quik! Forms Engine. For example:

   objQFE.CustomJavaScript = New List(Of String)

   objQFE.CustomJavaScript.Add("$(document).ready(function(){$('input[name=""1own.M.City""]').hover(function(){alert('key up!')})});")

In this example, when the user enters some text in the field named "1own.M.City" an alert will show up saying "key up!".

REST Example:
Set the CustomJavascript and HTMLBodyOnloadFunction Quik! Forms Engine properties:

 "CustomJavascript": [

      "function customMethod(){ return 'my custom js!'; }",

      "function anotherCustomMethod(){ return 'another custom js!'; }",

      "function customBodyOnLoad(){ alert(customMethod() + ' || ' +  anotherCustomMethod()); }"

  ],

  "HTMLBodyOnloadFunction": "customBodyOnLoad()",

In this example, when the form viewer loads, a pop up message appears:

Adding A Javascript File

If you're adding lots of JavaScript functions it may be better to write a .JS file and include it as a referenced file. For example:

   objQFE.CustomJavaFileIncludePath = New List(Of String)

   objQFE.CustomJavaFileIncludePath.Add("https://www.mydomain.com/scripts/custom.js")

   objQFE.CustomJavaScript.Add("$(document).ready(function(){$('input[name=""1own.M.City""]').keyup(customhello)});")

In this example, when the user fills in the field named "1own.M.City" the function "customhello" will fire, which is within the external script file (custom.js).