Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
OSCAR eForm Template with useful functions
<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
email
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
You can’t perform that action at this time.