We are using the Topaz Systems signature pad device for recording electronic signatures on documents.

Here is the pany 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!

We are using the Topaz Systems signature pad device for recording electronic signatures on documents.

Here is the pany 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!

• javascript
• activex
• electronic-signature
• topaz-signatures

• Hi Roberjo, I tried running your code but in my case the SigData is undefined. When I click the sign button, there no signature appearing in the object tag. I tried testing in my DemoOCX.exe if my e-signature is working but it works fine there. Where did I go wrong? Thanks. – user2481398 Commented Jan 28, 2015 at 8:45
• I would suggest opening a new question and be sure to include your code related to how the Sig Pad is being initialized. Thanks! – Roberjo Commented Jul 1, 2015 at 19:48

3 Answers 3

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!

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 pression 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