jsAPI examples

Accessing data from URL Import

This example shows how to manipulate questions and answers based on URL parameters.

CODE

 if (getParm('fb') == "1")
{
   vpGetElements('Q23.A1')[0].checked = true;
}
 
 
function getParm( name )           
{             
   name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");             
   var regexS = "[\\?&]"+name+"=([^&#]*)";             
   var regex = new RegExp( regexS );             
   var results = regex.exec( window.location.href );             
   if ( results == null )               
      return "";             
   else               
      return results[1];           
}

How to add custom JavaScript

If you would like to add custom JavaScript to the form, you need to have access to the account where this form is located.

To add the JavaScript, click the Scripts button on the toolbar menu.

Please contact your account manager or Support team if this button is missing from your ribbon toolbar.

On the Scripts page, you may enter your JavaScript code the following way:

CODE

 function start() {
...
// your code
...
}
 
jQuery(document).ready(function () {
  start();
});

Function start() is executed every time the page loads, allowing programmers to hook up functions to certain events. All internal browser DOM events are accessible. The most common events are button clicks, browser control clicks, or "on blur" events when the focus moves out of the control.

The following fragment of the code illustrates how to hook up a function that will execute every time the 'Next' button is clicked, and function that will execute if 'Next' button is clicked on the page that includes certain DOM document element:

CODE

function start()
{
 
...
   // every time Next button is clicked execute function nextPage()
   document.getElementById("goNextPage").onclick=nextPage;
 
   // if page contains element QuestionLabelTd6064474 and Next button is clicked execute function nextq6064474()
   if (document.getElementById('QuestionLabelTd6064474')!=null){
       document.getElementById("goNextPage").onclick=function (){return nextq6064474('QuestionLabelTd6064474');};
       }
...
}
jQuery(document).ready(function () {
  start();
});

This piece of code shows how to invoke function funcQ15_preprocessor() prior to the load of the page based on the 3D Matrix question Q15:

CODE

function start()
{
...
if (vpGetElements('Q15.A1.C1')[0] != null){
   funcQ15_preprocessor();
   }
...
}
jQuery(document).ready(function () {
  start();
});

Also, you may paste the link to the script hosted externally. The FORM naming convention is to add form/survey ID after letter "s" and use .js as a file extension. So in the example below, JavaScript file http://www.worldapp.com/pm-out/s255668.js is stored in FORM production survey ID: 255668.

CODE

<script type="text/javascript" language="javascript" src="http://www.worldapp.com/pm-out/s255668.js" ></script><script>start();</script>

It can contain a bulk of code like in the following example:

CODE

jQuery(document).ready(function () {
  // your code
});

More information about the method used in the example above can be found in JQuery API Documentation.

Send data from one page to another.

On many occasions, when the form/survey consists of multiple pages, there might be a need to execute some logic based on the answers to the previous question(s). The feature called Piping is used to maintain the state across multiple pages.

On the input side of piping, the following JavaScript code needs to be added to the Scripts page of the form/survey:

CODE

jQuery(document).ready(function () {
  var pipe= new array('{Q7.A3}','{Q18.A1.C1}');
  start(pipe);
});

Consequently, on the receiving end of piping, the following code in start() function is needed in order to read the information and call appropriate logic in functions f_q7() and f_q18() based on it:

CODE

function start(pipe_in) {
...
  if ( pipe_in[0] != "") {
     f_q7();               
  }
  if ( pipe_in[1] != "") {
     f_q18();              
  }
...
}

Here is another example of piping used to copy address fields from one page of the form/survey to another:

CODE

function Pipe()
{
  var name='{Q3.A1}';
  var phone='{Q3.A3}';
  var address='{Q3.A5}';
  var city='{Q3.A6}';
  var state='{Q3.A7}';
  var zip='{Q3.A8}';
  vpGetElements("Q23.A1")[0].value=name;
  vpGetElements("Q23.A2")[0].value=phone;
  vpGetElements("Q23.A3")[0].value=address;
  vpGetElements("Q23.A4")[0].value=city;
  vpGetElements("Q23.A5")[0].value=zip;
  vpGetElements("Q23.A7")[0].value=state;
}
  
jQuery(document).ready(function () {
  if (vpGetElements("Q23.A1") !=null) {
    Pipe();
  }
});