JavaScript

JavaScript is one of the tools we use to develop complex interactive survey applications.

JavaScript is a programming language that is embedded into HTML documents. It controls the rendering of the HTML document and can be used to enhance the functionality of the questionnaire elements. JavaScript can be used for:

Response Validation
Facilitate Form and Item Completion
Data Validation
Dynamic Generation of Questionnaire Elements
Formatting

Much of our work involves the implementation of customized JavaScripts to support your survey needs. This enables us to develop dynamic and interactive web forms that create a functional and intuitive experience for your survey participants.

Some of the examples below show how JavaScript can be used in questionnaires.

Response Validation: Missing Items

For some surveys, it is important to get responses to certain questions. We label these questions: "required". Look at the sample questionnaire below. Each of the fields is required. Try submitting the form without providing a response to one or more of the items.

The JavaScript source code for the example above is shown in this box. JavaScript is an object oriented superscript of the C language. That means that the foundation for the keywords, syntax, and structure is based on the C language (i.e., JavaScript is a Superset of C). In addition, JavaScript extends the C language to add Object Oriented capabilities such as methods, properties, and classes.

function MissingFields(requestedAction) {
  if(!document.vrespform.EnteredName.value) document.getElementById('requiredRowName').style.backgroundColor='#ffff00';
  GradeOpts=document.getElementsByName('Grade');
  var hasGrade=false;
  for(g=0;g<GradeOpts.length;g++) if(GradeOpts[g].checked) hasGrade=true;
  if(!hasGrade) document.getElementById('requiredRowGrade').style.backgroundColor='#ffff00';
  if(document.getElementById('SelLoS').selectedIndex<=0) document.getElementById('requiredRowLoS').style.backgroundColor='#ffff00';
  if(!document.vrespform.EnteredName.value){ alert('Please enter your full name'); document.vrespform.EnteredName.focus(); return -1;}
  if(document.vrespform.LoS.selectedIndex<=0){ alert('Select your Years of Service'); document.vrespform.LoS.focus(); return -1;}
  if(rf_Grade==-1){ alert('Indicate your Grade'); return -1;}
  return 1;
}

Facilitating Items: Select List Combo Boxes

A "Combo Box" is a combination of a "Select List" and a "Textbox". Usually, the text box is shown above the select list. When the user types information into the Textbox, that information is used as a filter to show a set of items in the Select List. Then the user can choose from the select list to facilitate the enter of this data.

At which institution did you receive your degree?

(double click to select)

One of the key functions that enables this input method is the "setHandler()" function shown below. This function establishes the event handlers for the various input objects. The event handler specifies what actions are to take place when certain mouse or keyboard events occur.

function setHandler() { 
    // Source Select List
    ssl=document.getElementById('SelInstitutionList');
    ssl.ondblclick=handleBigSelectListItem;
    ssl.onchange=handleUpdateTextItem;
    twsl=document.getElementById('SelTempInst'); // Div for the Source List
    twsl.ondblclick=handleSmallSelectListItem;
    twsl.onblur=handleSmallSelectListItem;
    twsl.onchange=handleUpdateTextItem2;
    tin=document.getElementById('TxtInstitutionName');
    tin.onmouseup=ShouldIShowAllInstitutionOptions;
  }

Data Validation: Range Checking

If you need values to be entered into a text box and want to restrict the range of acceptable values, the JavaScript code below will restrict the value entered and will only accept numbers from 0 to 5.

<Form>
   <input type=text size=2
      onBlur="this.value=(isNaN(this.value))?0:(this.value<0)?0:(this.value>5)?5:this.value;">
</Form>

Enter a values between 0 and 5 in the boxes below. See what happens if you enter a different value.

Data Validation: Email Address Syntax

If you need accurate values to be entered into email address fields, the JavaScript code below will check the data entered.

<Form>
   <input type=text size=40
      onBlur="filter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9])+$/;
if(!filter.test(this.value)) {alert('Invalid email syntax.');Form.EmailAddress.focus();}">
</Form>

Enter an email address in the box below.
See what happens if you enter an incorrect value.

Dynamic Generation of Questionnaire Elements

What if you had several locations and each location had a variety of departments. And you want to restrict the employees to selecting only the departments at their location. How could you do that in HTML? You could use conditional branching (offered by some of our competitors). But that would require more than one page for your questionnaire. What if you wanted the questionnaire to be on one page and still maintain this functionality. How could you do it in just one HTML page? Answer: JavaScript.

JavaScript can be used to dynamically generate questionnaire elements in real-time directly on the questionnaire as it is
being completed by the participants.

Click here or here for a demonstration.

Add commas to a number

If your questionnaire requires a dollar amount (such as base salary or operating budget), you may want to have the number formatted with commas to enhance the accuracy of the data collected. This can easily be performed using a function similar to the one shown below:

function insert(MyValue) {
   var re = /(-?\d+)(\d{3})/
   var num = MyValue
   while (re.test(num)) {
      num = num.replace(re,"$1,$2")
   }
   return MyValue
}

Enter numbers in the boxes below.
Notice how the numbers are fomatted with commas once you move to the next field.

Try it with decimals, dollar signs, other characters.

Remove commas from a number

For Example:

function remove(form) {
   var re = /,/g
   form.plainOutput.value = form.commaInput.value.replace(re,"")
}

Interactive Shading

Internet Explorer allows for interactive shading of form elements. Just move the mouse over the elements below for an example.

First Name:
Last Name:

Music Sport Travel

For Example

clr=new Array('yellow','white','silver');
function highlight(state) {
   element=event.srcElement;
   if(element.tagName=='INPUT') {
      etype=element.type;
      if((etype=='submit' || etype=='reset') && state==1) state=2;
      element.style.backgroundColor=clr[state];
      element.focus();
   }
}

Conditional Enabling of Items

Internet Explorer allows you to select certain items to be enabled or disabled. Just answer the items below for an example.

Example 1:

Example 2:

Additional Resources are at: http://developer.irt.org/script/script.htm