| Table of Contents | ||||||||
|---|---|---|---|---|---|---|---|---|
|
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.
- Any time you specify an 'id' attribute on an obs tag (for example: <obs id="weight" .../>) you have access to the displayed fields (in this example: weight.value, weight.date, weight.error and weight.accessionNumber)
- Since version 1.9.0, any time you specify an 'id' attribute in an encounterDate, encounterLocation or encounterProvider tag (for example: <encounterDate id="encounterDate" .../>, <encounterLocation id="encounterLocation"/> or <encounterProvider id="encounterProvider"/> you have access to the displayed fields (in this example: encounterDate.value, encounterDate.error, encounterLocation.value, encounterLocation.error, encounterProvider.value and encounterProvider.error)
Also note that attempting to use a less than (<) symbol within javascript will result in an error when saving the form, because the < symbol will be interpreted as the beginning of a tag. Use:
| Code Block |
|---|
< |
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):
Example for encounter details (since: 1.9.0):Code Block $j(function() { getField('weight.value').change(function() { window.alert('Weight is now ' + getValue('weight.value')) }); });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):
Example for encounter details (since: 1.9.0):Code Block $j(function() { window.alert('You entered ' + getValue('weight.value') + 'kg as the weight'); });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):
Example for encounter details (since: 1.9.0):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 });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.
Example:
| Code Block |
|---|
<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?'
...
| Code Block |
|---|
<script type="text/javascript">
if(jQuery){
$j(document).ready(function(){
$j('#1-removeEntry').remove();
$j('#10-addEntry').remove();
$j('#1-toggleContainer').show();
$j('#11-removeEntry').remove();
$j('#20-addEntry').remove();
$j('#11-toggleContainer').show();
});
$j(document).ready(function(){
$j('button.addEntry').live("click", function(){
var correctedAddButtonId = parseFloat(this.id) + 1;
var contentAddId = "#" + correctedAddButtonId + "-toggleContainer";
$j(contentAddId).toggle(true);
$j('#' + this.id).toggle(false); $j('#' + parseFloat(this.id) + '-removeEntry').toggle(false);
return false;});
});
$j(document).ready(function(){
$j('button.removeEntry').live("click", function(){
var correctedRemoveButtonId = parseFloat(this.id) - 1;
var contentAddId = "#" + parseFloat(this.id) + "-toggleContainer";
$j(contentAddId).toggle(false);
$j( ':input:not(:button)', contentAddId).val([]);
$j('#' + correctedRemoveButtonId + '-addEntry').toggle(true); $j('#' + correctedRemoveButtonId + '-removeEntry').toggle(true);
return false;});
});
}
</script>
|
...
Note that the convention number-name is used for id attributes for the container divs and the addEntry and removeEntry class buttons. This is important for the script as mentioned in the javascript section. To make this dynamic we define {n| similarly to the way you would define {concept| within a render tag using n="the unique sequential number of the render on the page".
| Code Block |
|---|
<section headerLabel="5. Assessment (as Problem List)"> <table> <obsgroup groupingConceptId="1284"> <tr> <th>Age: <lookup expression="patient.age"/>y.o., Gender: <lookup expression="patient.gender" codePrefix="Patient.gender."/>, with new problems including:</th> </tr> <tr><td> <repeat> <template> <div id="{n}-toggleContainer" style="display:none;"> <table> <tr> <td> <obs conceptId="6042" answerClasses="{concept}" style="autocomplete" labelText="Problem Added:"/> </td> <td><button id="{n}-addEntry" class="addEntry">Add</button><button id="{n}-removeEntry" class="removeEntry">Remove</button></td> </tr> </table> </div> </template> <render n="1" concept="Diagnosis"/> <render n="2" concept="Diagnosis"/> <render n="3" concept="Diagnosis"/> <render n="4" concept="Diagnosis"/> <render n="5" concept="Diagnosis"/> <render n="6" concept="Diagnosis"/> <render n="7" concept="Diagnosis"/> <render n="8" concept="Diagnosis"/> <render n="9" concept="Diagnosis"/> <render n="10" concept="Diagnosis"/> </repeat> </td></tr> <tr><th>with resolved problems including:</th></tr> <tr><td> <repeat> <template> <div id="{n}-toggleContainer" style="display:none;"> <table> <tr> <td><obs conceptId="6097" answerClasses="{concept}" style="autocomplete" labelText="Problem Resolved:"/></td> <td><button id="{n}-addEntry" class="addEntry">Add</button><button id="{n}-removeEntry" class="removeEntry">Remove</button></td> </tr> </table> </div> </template> <render n="11" concept="Diagnosis"/> <render n="12" concept="Diagnosis"/> <render n="13" concept="Diagnosis"/> <render n="14" concept="Diagnosis"/> <render n="15" concept="Diagnosis"/> <render n="16" concept="Diagnosis"/> <render n="17" concept="Diagnosis"/> <render n="18" concept="Diagnosis"/> <render n="19" concept="Diagnosis"/> <render n="20" concept="Diagnosis"/> </repeat> </td></tr> </obsgroup> </table> </section> |
...