Javascript function reference

Javascript overview

You've always been allowed to write Javascript in an HTML form but since version 1.6.8 we provide some built-in Javascript helper functionality.

...

to represent a less than symbol within your javascript.

getField(idAndProperty)

Used to get a JQuery handle to a field, so you can attach event listeners to it.

• argument: idAndProperty the field you want to get (for example "weight.value")
• returns: a JQuery selector for the field you requested
  Example for obs (since: 1.6.8):

  Code Block
  $j(function() { getField('weight.value').change(function() { window.alert('Weight is now ' + getValue('weight.value')) }); });

  Example for encounter details (since: 1.9.0):

  Code Block

  $j(function() { getField('encounterDate.value').change(function() { window.alert('Encounter date is ' + getValue('encounterDate.value')) }); }); $j(function() { getField('encounterLocation.value').change(function() { window.alert('Location is ' + getValue('encounterLocation.value')) }); }); $j(function() { getField('encounterProvider.value').change(function() { window.alert('Provider is ' + getValue('encounterProvider.value')) }); });

  
  

getValue(idAndProperty)

Gets the value of a field.

• argument: idAndProperty the field you want to get (for example "weight.value")
• returns: the value of the specified field
  Example for obs (since: 1.6.8):

  Code Block
  $j(function() { window.alert('You entered ' + getValue('weight.value') + 'kg as the weight'); });

  Example for encounter details (since: 1.9.0):

  Code Block

  $j(function() { window.alert('Encounter date is ' + getValue('encounterDate.value') + '.\nEncounter date error is ' + getValue('encounterDate.error') + '.\nEncounter location is ' + getValue('encounterLocation.value') + '.\nEncounter location error is ' + getValue('encounterLocation.error') + '.\nProvider is ' + getValue('encounterProvider.value') + '.\nProvider error is ' + getValue('encounterProvider.error')) });

  
  

setValue(idAndProperty)

Sets the value of a field

• argument: idAndProperty the field you want to set the value of (for example "weight.value")
• value: the value you want to set
  Example for obs (since: 1.6.8):

  Code Block
  $j(function() { setValue('weight.value', 74); setValue('scheduledVisit.value', true); setValue('howTravelClinic.value', 456); // 456 is a concept id that's a legal answer to this question });

  Example for encounter details (since: 1.9.0):

  Code Block

  $j(function() { setValue('encounterDate.value', "2012-01-01"); // 2012-01-01 is a valid date setValue('encounterDate.error', "*Some Encounter dateError*"); setValue('encounterLocation.value', 15); // 15 is a location id setValue('encounterLocation.error', "*Some Location Error*"); setValue('encounterProvider.value', 146552); // 146552 is a provider id setValue('encounterProvider.error', "*Some Provider Error*"); });

  
  

Defining javascript functions to call before form validation and submission

Since version 1.8.0, it is possible to define javascript functions within a form that will be called before form validation and form submission. Two new array variables have been added to an HTML form: beforeValidation and beforeSubmit. These arrays are empty by default, but form developers can define functions within a form and add them to these arrays. All functions added to the beforeValidation array will be called before form validation, and all functions added to beforeSubmit will be called before form submission. These functions should return a boolean result: if a function returns false, no further functions are called, and the validation or submission is cancelled. 

...

<includeIf velocityTest="$patient.gender == 'M'">
<BR>This patient is a male.</BR>
<obs conceptId="5090" id="height" labelText="Height:"/>
<script type="text/javascript">
beforeSubmit.push(function() {
    var val = getValue('height.value');
    if (val == null || val == '') {
        getField('height.error').html('Required for males').show();
        return false;
    }
    return true;
});
</script>
</includeIf>

Additional jquery examples

If you want areas to "grey out" based on checking a radio button or checkbox, review this additional documentation for explanation and examples.

Problems

Yes/no Answers

There are key problems in many if not most htmlforms involving the distinction between radio buttons and checkboxes. Radio buttons can be used in openMRS when there is a concept with several coded answers to choose from. However, sometimes the concept is 'symptom present' or 'symptom absent' with coded answers for a series of symptoms. The question being asked on the form may be 'does the patient present with a cough?' with the answers 'yes' or 'no.' But, from the system's prospective, it is really two questions: 'Is a cough present?' and 'Is a cough absent?'

...

When using the repeat tag, the form appears cleaner to users if they can only see one set of the template. This makes the form easier to work and easier to read. However, there is not an option to display a variable number of repeats. One quick fix to this is to code in a maximum number of repeats that you might need or have time to address in one visit (we use 10 problems, for example). Then, you can use jQuery to Add and Remove fields set by default to be hidden. This solution could be applied to other places where toggling content between hidden or shown would be useful in the form in order to provide a more intuitive environment for the users by only displaying relevant parts of the form.

Solutions

Yes/No Answers and Irrelevant Form Sections

The Javascript

Using the JQuery library while making slight modifications to the markup we can achieve simple solutions to both these problems. The following script can be copied toward the top of your htmlform.

...

Note: The use of the span tag is not advised for this feature because it is not supported evenly across all browsers. Specifically, certain versions of internet explorer will not fade transparencies on span elements. The div tag with additional CSS is the preferred method. Td and tr tags are also fine candidates.

Toggle Sections of the Form Using Add and Remove Buttons

The Javascript

One solution to this problem is similar to the solution provided for irrelevant form sections. While this works as a quick fix, a better solution could expand on this code to make it more dynamic as currently you have to define the fields that are displayed by default or only show either the add or the remove button. These pre-defined custom <repeat> sets are determined by listing the id's for the addEntry and removeEntry button's plus the toggleContainer div. Below you can see that the first Remove button and final Add button are removed for each group of repeats (we used 10 repeats). the toggleContainer for the first repeat of each section is shown by default, but all others are hidden.

...