How to access Topaz Signature Pad ActiveX object through javascript?
-
01-06-2021 - |
Question
We are using the Topaz Systems signature pad device for recording electronic signatures on documents.
Here is the company provided demo for javascript usage:
Javascript-based HTML Internet Signature demo download
The signature pad is added to the page through an <OBJECT />
element.
<OBJECT classid=clsid:69A40DA3-4D42-11D0-86B0-0000C025864A height=75
id=SigPlus1 name=SigPlus1
style="HEIGHT: 90px; WIDTH: 300px; LEFT: 0px; TOP: 0px; border: 1px solid #000; margin-top:10px; " VIEWASTEXT>
<PARAM NAME="_Version" VALUE="131095">
<PARAM NAME="_ExtentX" VALUE="4842">
<PARAM NAME="_ExtentY" VALUE="1323">
<PARAM NAME="_StockProps" VALUE="0">
</OBJECT>
The documentation for performing actions on the object in javascript references VBScript and calls the object by id only.
<script language="javascript">
function OnClear() {
SigPlus1.ClearTablet();
}
function OnCancel() {
SigPlus1.TabletState = 0;
}
</script>
I found that this approach fails to find the actual object in the DOM with all associated methods and attributes. Calling these functions results in:
SigPlus1 is undefined
OR
SigPlus1.ClearTablet() is not a function
How can I get the actual object in the javascript functions in order to call its methods and set its properties?
I have tried using prototype and jQuery to select the object in the DOM.
var vsig = $('SigPlus1'); // prototype
var vsig = $('#SigPlus1'); // jQuery
var vsig = document.form.SigPlus1; // document
None of which give the actual object required.
Thanks!
Solution
I was able to get the actual object by using document.getElementById(id);
So this code ended up working:
var vSig = document.getElementById('SigPlus1');
I hope this saves someone else from having to search for this answer!
OTHER TIPS
Once you have vSig initialized, you can call the associated functions and access the properties of the signature. For example the "Save Signature' button onclick should fire something like this:
function OnSaveSignature() {
var vSig = document.getElementById('SigPlus1');
if(vSig.NumberOfTabletPoints == 0){ // No signature data (Did not sign yet)
alert("No Signature Found!");
} else {
vSig.TabletState = 0; // Turn off sig tablet
vSig.SigCompressionMode = 1; // Set compression mode
mySaveSigFunction(vSig.SigString); // Save sig data
} // Done!
}
I've managed to get it working by ignoring the "script" function for OnSign() and replacing the onclick="OnSign()" in my button with:
<INPUT id="SignBtn" name="SignBtn" type="button" value="Sign" onclick="javascript:SigPlus1.TabletState = 1;">
(ie I just took the javascript code from the section and used it directly instead of as a function.
I suppose my question is in relation to your answer, what do I do with the variable vSig once it is set by getElementbyId? As I'd prefer to leave the code within my script section.
Thanks