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?'
Irrelevant Form Sections
Sometimes, on a paper form clinicians record many details about one specific question. A clinician might want to know 'Does the patient present with a cough?' and then 'How long has the cough persisted?' and 'How serious is the cough?' When the form is rendered as an htmlform, there is a possibility that a user will enter impossible data by accident. It is possible for a series of responses to indicate that the patient had 'no cough that persisted for 3 weeks and was extremely serious.'
Toggle Sections of the Form Using Add and Remove Buttons
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.
Yes/No Answers and Irrelevant Form Sections
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.
First, JQuery is included. Next, the script checks to see if JQuery is loaded properly. If so, it proceeds. This means that if there is problem with JQuery, the script will do nothing, and the form will render as it would with no scripting.
Now for an example:
In the physical examination of a form, there is a line for lungs. The possible answers are 'normal,' 'absent,' 'noisy,' and 'crackly.' The rule we need to express: 'normal can be selected OR ANY of the others but not both. Any of the abnormal sounds can be checked, even more than one, but they cannot be checked at the same time as normal. Here is the code:
The following images demonstrate the possible selections:
NOT normal, two selections.
When the script comes across an element with the class 'enableDisable,' it looks for the two child elements with the following IDs: 'trigger', 'disabled.' The first (and preferably only) checkbox in the trigger element will toggle the status of the inputs and style of everything in the 'disabled' element. This means, for the question 'Does the patent have a cough,' 'yes' can be a trigger for more detailed questions to apear. The two solutions can be combined in the following code example and corresponding images.
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
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.
The other important note is that this script requires all of the Add and Remove buttons to have unique id numbers preceding the id name. The format we use is idnumber-idname to uniquely define each button or div container. This is because the id is converted to an int using the parseFloat() function, which obtains an int from the first part of a string and discards the following text. We assign each render in the entire form with a sequential id number. For example, if we have one repeat for Problem's Added, and another repeat for Problem's Resolved for a basic SOAP Adult Return Note, with 10 maximum renders available in each section, then our first ten renders for Problem's Added would be given id's 1-10 and our next ten renders within the Problems Resolved repeat section would be given id's 11-20, the next 10 renders later in the form would be 21-30 and so on.
For now we will explain the markup with an example and perhaps expand on this in the future.
As you can see, the form only displays the add and remove buttons next the the current rendered template and travels as you move through the list of available renders.
An issue with this that is not addressed in this example that prior to removing a field the user must have nothing selected within the input or else they could accidentally input a value that they didn't intend to input after toggling the value hidden with the remove button. This will be addressed in the next version of the script.