Personal tools
Navigation
 

Working eForm example of multiple signatures

This file can be opened as is in the browser or loaded in OSCAR to serve as a base of your own eform. It provides tablet support for Android and IOS as well as PDF and fax support.

HTML icon demo.htm — HTML, 8 kB (8983 bytes)

File contents

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, width=device-height"><!-- mobile Safari, FireFox, Opera Mobile -->

    <link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- for convenience reference a hosted library -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<!-- for production OSCAR otherwise use 
<script type="text/javascript" src="${oscar_javascript_path}jquery/jquery-1.4.2.js"></script>
-->


<!-- OSCAR based files for greater functionality -->
<script type="text/javascript" src="${oscar_javascript_path}eforms/printControl.js"></script>
<script type="text/javascript" src="${oscar_javascript_path}eforms/faxControl.js"></script>


<!-- for OSCAR testing use jsignature library that you load to the images -->
<script type="text/javascript" src="${oscar_image_path}jSignature.min.js"></script>

    <!-- Proxying off unbolt.net to get latest from github jSignature repo but only for external testing -->
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.js.php"></script>
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.CompressorBase30.js.php"></script>
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.CompressorSVG.js.php"></script>
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.UndoButton.js.php"></script>
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.SignHere.js.php"></script>
    <script type="text/javascript" src="javascripts/modernizr.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="javascripts/flashcanvas.js"></script>
    <![endif]-->



<title>jSignature Demo eForm test</title>

<style media="screen">
 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;
	 color: blue;
	 background-color: white;
 }

#CanvasSignature1 {
	 border-style: solid;
	 border-color: transparent;
	 color: black;
	 background-color: transparent;
 }
    /* Drawing the 'gripper' for touch-enabled devices */
    html.touch #content {
        float:left;
        width:92%;
    }
    html.touch #scrollgrabber {
        float:right;
        width:4%;
        margin-right:2%;
        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)
    }
    html.borderradius #scrollgrabber {
        border-radius: 1em;
    }
 </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;
 }
#CanvasSignature1 {
	 border-style: solid;
	 border-color: transparent;
	 color: black;
	 background-color: white;
 }

 </style>



<!--[if lt IE 9]>
<script type="text/javascript" src="${oscar_image_path}flashcanvas.js"></script>
<![endif]-->

<script type="text/javascript">
jQuery(document).ready(function() {
	$("#CanvasSignature1").jSignature()
	$("#CanvasSignature2").jSignature({'decor-color':'#FFFFFF'})
	var pdf = jQuery("input[name='pdfButton']");
	if (pdf.size() != 0) {
		pdf.attr("onclick", "").unbind("click");
		pdf.attr("value", "PDF");
		pdf.click(function(){saveSig();submitPrintButton(false);});
		}
	var pdfSave = jQuery("input[name='pdfSaveButton']");
	if (pdfSave.size() != 0) {
		pdfSave.attr("onclick", "").unbind("click");
		pdfSave.attr("value", "Submit & PDF");
		pdfSave.click(function(){saveSig();submitPrintButton(true);});
		}
})
</script>

<script type="text/javascript">
function saveSig(){
	var $sig=$("#CanvasSignature1");
	var datapair=new Array();
	datapair=$sig.jSignature("getData","base30");
	document.getElementById("StoreSignature1").value=datapair.join(",");
	var $sig=$("#CanvasSignature2");
	var datapair=new Array();
	datapair=$sig.jSignature("getData","base30");
	document.getElementById("StoreSignature2").value=datapair.join(",");
}
function clearSig(){
	$("#CanvasSignature1").jSignature("reset");
	$("#CanvasSignature2").jSignature("reset");
}
function loadSig(){
	var $sig=$("#CanvasSignature1");
	var data
	data=document.getElementById("StoreSignature1").value;
	$sig.jSignature("setData","data:"+ data) ;
	var $sig=$("#CanvasSignature2");
	var data
	data=document.getElementById("StoreSignature2").value;
	$sig.jSignature("setData","data:"+ data) ;
}
</script>

<script language="javascript">
function formPrint(){
	window.print();
} 
</script>

<!-- scripts to confirm closing of window if it hadnt been saved yet -->
<script language="javascript">
//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?";
	 }
}
</script>

<script type="text/javascript">
function reImg(){
// for stand alone development without uploading to OSCAR
	var strLoc = window.location.href.toLowerCase();
	if(strLoc.indexOf("https") == -1) {
		var src1 = document.getElementById("BGImage1").src;
		document.getElementById("BGImage1").src = src1.replace("$%7Boscar_image_path%7D","");
		var src2 = document.getElementById("BGImage2").src;
		document.getElementById("BGImage2").src = src2.replace("$%7Boscar_image_path%7D","");
	}
}
</script>
</head>

<body onload="reImg();loadSig();">
<form method="post" action="" name="FormName" id="FormName" >
<div>
</div>


<div id="page1" style="page-break-after:always;position:relative;" >

<img id="BGImage1" src="${oscar_image_path}MDAC_Requisition_Form_Aug_2015.png" style="position: relative; left: 0px; top: 0px; width:750px">

	<div id="CanvasSignature1" class="sig" style="position:absolute; left:68px; top:62px; width:303px; height:103">
	</div>

	<input type="hidden" name="StoreSignature1" id="StoreSignature1" value="">

<input name="page1_1" id="page1_1" type="text" class="noborder" style="position:absolute; left:68px; top:171px; width:100px; height:15px; font-family:sans-serif; font-style:normal; font-weight:normal; font-size:12px; text-align:left; background-color:transparent;" value="signature 1">

</div>


<div id="page2" style="page-break-after:always;position:relative;" >

<img id="BGImage2" src="${oscar_image_path}MDAC_Requisition_Form_Aug_2015.png" style="position: relative; left: 0px; top: 0px; width:750px, height:800px">
	<div id="CanvasSignature2" class="sig" style="position:absolute; left:83px; top:193px; width:160px; height:38" >
	</div>

	<input type="hidden" name="StoreSignature2" id="StoreSignature2" value="">
<input name="page2_1" id="page2_1" type="text" class="noborder" style="position:absolute; left:83px; top:230px; width:100px; height:15px; font-family:sans-serif; font-style:normal; font-weight:normal; font-size:12px; text-align:left; background-color:transparent;" value="signature 2">

</div>


 <div class="DoNotPrint" id="BottomButtons" style="position: absolute; top:1850px; left:0px;"  onfocus="saveSig()">
	 <table><tr><td>
		 Subject: <input name="subject" size="40" type="text"> <br> 
		<input value="Submit" name="SubmitButton" id="SubmitButton" type="submit" onclick=" saveSig(); releaseDirtyFlag();"> 
		<input value="Clear Sig" name="ClearButton" id="ClearButton" type="button" onclick="clearSig();"> 
		<input value="Save Sig" name="SaveSigButton" id="SaveSigButtonn" type="button" onclick="saveSig();"> 
			<input value="Reset" name="ResetButton" id="ResetButton" type="reset"> 
			<input value="Print" name="PrintButton" id="PrintButton" type="button" onclick="formPrint();"> 
			<input value="Print & Submit" name="PrintSubmitButton" id="PrintSubmitButton" type="button" onclick="formPrint();releaseDirtyFlag();setTimeout('SubmitButton.click()',1000);"> 
	 </td></tr></table>
 </div>
 </form>

</body>
</html>

Document Actions

 

Download button

DOWNLOAD OSCAR FOR TESTING

 

eForms button

DOWNLOAD SHARED E-FORMS


 Customize button

FIND PLUG-INS AND TWEAKS
FOR YOUR OSCAR EMR

 

Subscribe Button

SUBSCRIBE TO DISCUSSION LIST 
(SEE ALL LISTS)

  

Help button

ACCESS THE ONLINE MANUALS
(PAID SUPPORT)