Last active
May 23, 2018 21:02
-
-
Save dermatologist/0a470af116ac738b8e6b23c7cc2d2691 to your computer and use it in GitHub Desktop.
OSCAR eForm Template with useful functions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title>OSCAR Test Form</title> | |
| <!-- About this template | |
| Created By: Bell Eapen, McMaster University. | |
| Website: http://nuchange.ca | |
| Date: 12 July, 2016 | |
| Instructions: | |
| Form is edited between the tags -- Form Starts Here-- and -- Form Ends Here-- | |
| Detailed instructions for use is available at | |
| http://nuchange.ca/oscar-eform-template | |
| LICENSE: GPL V3. Retain this header if you use this template. | |
| The OSCAR DATABASE Variables are listed below this file. | |
| Note: Field Names are mapped to values in the DATABASE TABLE eform_values | |
| It is important to give unique names for each field. | |
| prefix the names with a namespace | |
| --> | |
| <!-- Style added by OSCAR starts here--> | |
| <style> | |
| input { | |
| -moz-box-sizing: content-box; | |
| -webkit-print-color-adjust: exact; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box | |
| } | |
| .sig { | |
| border: 2px dotted blue; | |
| background-color: lightgrey; | |
| } | |
| </style> | |
| <style type="text/css" media="print"> | |
| .DoNotPrint { | |
| display: none; | |
| } | |
| .noborder { | |
| border : 0px; | |
| background: transparent; | |
| scrollbar-3dlight-color: transparent; | |
| scrollbar-3dlight-color: transparent; | |
| scrollbar-arrow-color: transparent; | |
| scrollbar-base-color: transparent; | |
| scrollbar-darkshadow-color: transparent; | |
| scrollbar-face-color: transparent; | |
| scrollbar-highlight-color: transparent; | |
| scrollbar-shadow-color: transparent; | |
| scrollbar-track-color: transparent; | |
| background: transparent; | |
| overflow: hidden; | |
| } | |
| .sig { | |
| border-style: solid; | |
| border-color: transparent; | |
| background-color: transparent; | |
| } | |
| </style> | |
| <!-- Style added by OSCAR starts here--> | |
| <!-- OSCAR based files for greater functionality --> | |
| <!-- Referenced from OSCAR. Add all javascript files to OSCAR and reference it as below | |
| in production. All libraries are loaded from CDNJS for testing | |
| -------------------------------------------------------------------------------------- | |
| <script type="text/javascript" src="${oscar_javascript_path}jquery/jquery-1.4.2.js"></script> | |
| <script type="text/javascript" src="../share/calendar/calendar.js"></script> | |
| <script type="text/javascript" src="../share/calendar/lang/calendar-en.js"></script> | |
| <script type="text/javascript" src="../share/calendar/calendar-setup.js"></script> | |
| <link rel="stylesheet" type="text/css" media="all" href="../share/calendar/calendar.css" title="win2k-cold-1" /> | |
| --> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css"> | |
| <!-- auto ticking gender Xboxes OR checkboxes --> | |
| <script type="text/javascript" language="javascript"> | |
| // The functions below are added by OSCAR | |
| function checkGender() { | |
| if (document.getElementById("PatientGender").value == "M") { | |
| document.getElementById("Male").click(); | |
| } else if (document.getElementById("PatientGender").value == "F") { | |
| document.getElementById("Female").click(); | |
| } | |
| } | |
| function formPrint() { | |
| window.print(); | |
| } | |
| //keypress events trigger dirty flag | |
| var needToConfirm = false; | |
| document.onkeyup = setDirtyFlag; | |
| function setDirtyFlag() { | |
| needToConfirm = true; | |
| } | |
| function releaseDirtyFlag() { | |
| needToConfirm = false; //Call this function to prevent an alert. | |
| //this could be called when save button is clicked | |
| } | |
| window.onbeforeunload = confirmExit; | |
| function confirmExit() { | |
| if (needToConfirm) { | |
| return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"; | |
| } | |
| } | |
| function loadAfterDelay(){ | |
| //Check the current state on form load | |
| $('.parent-field').each(function(i, obj) { | |
| if(this.checked) | |
| $(this).closest('fieldset').find('.child-hidden').show(); | |
| else | |
| $(this).closest('fieldset').find('.child-hidden').hide(); | |
| }); | |
| $('.parent-select').each(function(i, obj) { | |
| var sel = $(this).val(); | |
| $(this).closest('fieldset').find('.child-hidden').hide(); | |
| $(this).closest('fieldset').find('.'+sel).show(); | |
| }); | |
| } | |
| function checkDuplicates(){ | |
| var timestamp = Date.now(); | |
| var created_on = $("#phs_created_on").val(); | |
| $("#phs_edited_on").val(timestamp); | |
| if(!created_on) | |
| $("#phs_created_on").val(timestamp); | |
| } | |
| // New utilities added for specific use cases in OSCAR | |
| $(document).ready(function() { | |
| // Load current state after delay | |
| setTimeout('loadAfterDelay()',1500); | |
| // Find sum | |
| var selects = $('.sum-select'); | |
| selects.change(function(){ | |
| var value = 0; | |
| selects.each(function(){ value += +this.value; }); | |
| $('#total_qty').val(value); | |
| }).trigger('change'); | |
| // Add timestamp to test duplicates | |
| checkDuplicates() | |
| // Initialize form validation | |
| $("#FormName").validate(); | |
| // If OSCAR Calendar functions are not available fallback on jquery | |
| if (typeof Calendar === "undefined") | |
| $("#appt_date").datepicker(); | |
| // Emulates radiobuttons with checkboxes as OSCAR does not support radiobuttons | |
| // Inside a fieldset give class="only-one" to all checkboxes | |
| $('.only-one').click(function() { | |
| $(this).closest('fieldset').find('.only-one').prop('checked', false); | |
| $(this).prop('checked', true); | |
| $(this).closest('fieldset').find('.parent-field').change(); | |
| }) | |
| // Parent-child relationships checkbox | |
| // Inside a fieldset give class="child-field" to all checkboxes | |
| $(".child-field").attr('disabled', true); | |
| $(".child-hidden").hide(); | |
| $(".grand-child-field").attr('disabled', true); | |
| //clicking the parent checkbox should check or uncheck all child checkboxes | |
| $(".parent-field").change(function () { | |
| if(this.checked) | |
| $(this).closest('fieldset').find('.child-hidden').show(); | |
| else | |
| $(this).closest('fieldset').find('.child-hidden').hide(); | |
| $(this).closest('fieldset').find('.child-field').attr('disabled', !this.checked); | |
| $(this).closest('fieldset').find('.child-field').prop('checked', false); | |
| }); | |
| //clicking the parent checkbox should check or uncheck all child checkboxes | |
| $(".parent-select").change(function () { | |
| console.log($(this).val()); | |
| var sel = $(this).val(); | |
| $(this).closest('fieldset').find('.child-hidden').hide(); | |
| $(this).closest('fieldset').find('.'+sel).show(); | |
| $(this).closest('fieldset').find('.'+sel).attr('disabled', false); | |
| $(this).closest('fieldset').find('.child-select').prop('checked', false); | |
| }); | |
| $(".child-field").change(function () { | |
| $(this).closest('fieldset').find('.grand-child-field').attr('disabled', !this.checked); | |
| $(this).closest('fieldset').find('.grand-child-field').prop('checked', false); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body onload="checkGender();"> | |
| <form method="post" action="" name="FormName" id="FormName" > | |
| <div> | |
| </div> | |
| <div id="page1" style="page-break-after:always;position:relative;" > | |
| <!-- Form Starts Here--> | |
| <h1>OSCAR eForm</h1> | |
| <label for="patient_name">Name of the patient. (required, at least 2 characters) | |
| </label> | |
| <!-- Two hidden fields to capture any unintentional duplicates | |
| If the record is a duplicate the values of these two fields will be different --> | |
| <input name="phs_created_on" id="phs_created_on" type="hidden"> | |
| <input name="phs_edited_on" id="phs_edited_on" type="hidden"> | |
| <input name="patient_name" id="patient_name" type="text" class="noborder" oscarDB=patient_name minlength="2" required=""> <br> | |
| <label for="email">Email (required)</label> | |
| <input name="email" id="email" type="email" class="noborder" oscarDB=email required=""> | |
| <hr> | |
| <fieldset> | |
| Gender: <br> | |
| <label for="Male">Male</label> | |
| <input class="only-one" name="Male" class="gender" id="Male" type="checkbox" /> | |
| <label for="Female">FeMale</label> | |
| <input class="only-one" name="Female" class="gender" id="Female" type="checkbox" /> <br> | |
| </fieldset> | |
| <label for="address">Address (required)</label> | |
| <textarea name="address" id="address" class="noborder" oscarDB=address required></textarea> | |
| <fieldset> | |
| Choose Treatment below:<br> | |
| <label for="treatment3">Azithromycin</label> | |
| <input name="treatment3" class="only-one" id="treatment3" type="checkbox"/><br> | |
| <label for="treatment4">Ceftriaxone</label> | |
| <input name="treatment4" class="only-one" id="treatment4" type="checkbox"/><br> | |
| <label for="treatment5">CP</label> | |
| <input name="treatment5" class="only-one" id="treatment5" type="checkbox"/><br> | |
| <label for="treatment6">Doxycycline</label> | |
| <input name="treatment6" class="only-one parent-field" id="treatment6" type="checkbox"/><br> | |
| <fieldset class="child-hidden"> | |
| <label for="treatment6-once">Once Daily</label> | |
| <input class="only-one child-field" name="treatment6-once" class="t6" id="treatment6-once" type="checkbox"/> | |
| <label for="treatment6-twice">Twice Daily</label> | |
| <input class="only-one child-field" name="treatment6-twice" class="t6" id="treatment6-twice" type="checkbox"/> | |
| </fieldset> | |
| </fieldset> | |
| <fieldset> | |
| <select id="std" name="std" class="parent-select"> | |
| <option value="" selected="selected">Please select</option> | |
| <option value="gonorrhoea">Gonorrhoea</option> | |
| <option value="syphilis">Syphilis</option> | |
| <option value="herpes">Herpes</option> | |
| <option value="chancroid">Chancroid</option> | |
| </select><br/> | |
| <fieldset class="gonorrhoea child-hidden"> | |
| <label for="azithromycin">Azithromycin</label> | |
| <input class="only-one child-select" name="azithromycin" class="t6" id="azithromycin" type="checkbox"/> | |
| <label for="ceftriaxone">Ceftriaxone</label> | |
| <input class="only-one child-select" name="ceftriaxone" class="t6" id="ceftriaxone" type="checkbox"/> | |
| </fieldset> | |
| <fieldset class="syphilis child-hidden"> | |
| <label for="penicillin">Penicillin</label> | |
| <input class="only-one child-select" name="penicillin" class="t6" id="penicillin" type="checkbox"/> | |
| <label for="erythromycin">Erythromycin</label> | |
| <input class="only-one child-select" name="erythromycin" class="t6" id="erythromycin" type="checkbox"/> | |
| </fieldset> | |
| </fieldset> | |
| <label for="appt_date">Appointment Date</label> | |
| <input name="appt_date" id="appt_date" type="text" class="noborder" oscarDB=appt_date> | |
| <br> | |
| <input name="PatientGender" id="PatientGender" type="hidden" oscarDB=sex> | |
| <!-- Form Ends Here--> | |
| </div> | |
| <div class="DoNotPrint" id="BottomButtons"> | |
| <table><tr><td> | |
| Subject: <input name="subject" size="40" type="text"> <br><br> | |
| <input value="Submit" class="button" name="SubmitButton" id="SubmitButton" type="submit" onclick=" releaseDirtyFlag();"> | |
| <input value="Reset" class="button" name="ResetButton" id="ResetButton" type="reset"> | |
| <input value="Print" class="button" name="PrintButton" id="PrintButton" type="button" onclick="formPrint();"> | |
| <input value="Print & Submit" class="button" name="PrintSubmitButton" id="PrintSubmitButton" type="button" onclick="formPrint();releaseDirtyFlag();setTimeout('SubmitButton.click()',1000);"> | |
| </td></tr></table> | |
| </div> | |
| </form> | |
| <!-- Use OSCAR Calendar if available --> | |
| <script type="text/javascript"> | |
| if (typeof Calendar != "undefined") | |
| Calendar.setup( { inputField : "appt_date", ifFormat : "%Y-%m-%d", button : "appt_date" } ); | |
| </script> | |
| <!-- | |
| OSCAR DATABASE VARIABLES | |
| ------------------------- | |
| today | |
| appt_date | |
| current_user | |
| current_user_ohip_no | |
| current_user_specialty_code | |
| current_user_cpsid | |
| current_user_id | |
| patient_name | |
| first_last_name | |
| patient_nameL | |
| patient_nameF | |
| patient_id | |
| label | |
| address | |
| addressline | |
| address_street_number_and_name | |
| province | |
| city | |
| postal | |
| dob | |
| dobc | |
| dobc2 | |
| dob_year | |
| dob_month | |
| dob_day | |
| NameAddress | |
| hin | |
| hinc | |
| hinversion | |
| hc_renew_date | |
| chartno | |
| phone | |
| phone2 | |
| cell | |
| phone_extension | |
| phone2_extension | |
| age | |
| ageComplex | |
| sex | |
| social_family_history | |
| other_medications_history | |
| family_history | |
| medical_history | |
| dxregistry | |
| OHIPdxCode | |
| ongoingconcerns | |
| reminders | |
| allergies_des | |
| allergies_des_no_archived | |
| recent_rx | |
| today_rx | |
| druglist_generic | |
| druglist_trade | |
| druglist_line | |
| doctor | |
| doctor_ohip_no | |
| doctor_specialty_code | |
| doctor_cpsid | |
| provider_name | |
| provider_name_first_init | |
| doctor_work_phone | |
| appt_provider_name | |
| appt_provider_id | |
| appt_no | |
| referral_name | |
| referral_address | |
| referral_phone | |
| referral_fax | |
| bc_referral_name | |
| bc_referral_address | |
| bc_referral_phone | |
| bc_referral_fax | |
| bc_referral_no | |
| clinic_name | |
| clinic_phone | |
| clinic_fax | |
| clinic_label | |
| clinic_addressLine | |
| clinic_addressLineFull | |
| clinic_address | |
| clinic_city | |
| clinic_province | |
| clinic_postal | |
| _eform_values_first | |
| _eform_values_last | |
| _eform_values_count | |
| _eform_values_countname | |
| _eform_values_count_ref | |
| _eform_values_countname_ref | |
| _eform_values_count_refname | |
| _eform_values_countname_refname | |
| _other_id | |
| dtap_immunization_date | |
| flu_immunization_date | |
| fobt_immunization_date | |
| mammogram_immunization_date | |
| pap_immunization_date | |
| guardian_label | |
| guardian_label2 | |
| --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment