Collecting 2 signatures

mikeg · April 9, 2017

Hello,

I have a signature pad working and writing to the table but I need to add a 2nd signature to complete a contract on the data page. When I try to draw in the 2nd signature pad it draws in the 1st one instead. Nothing can be drawn in the 2nd signature pad and it loads blue in color. The same code is in HTML Blocks for both signature pads, I simply changed the EditRecordSignature to EditRecordSalesSignature. Is there something else that needs to be edited for this to work?

nightowl · April 14, 2017

Hi mikeg,

The Caspio tech tip mentioned here only allows a single instance of the e-signature:

As mentioned in this link, accepting multiple signatures requires creating multiple instances of the jQuery signature library. To do that, you can do this:

Add a Header/Footer section to your Details DataPage.
Go to the Header section.
On the header section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

Then add this code:

<!-- Header code -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://someapp.com/jj/Signature/jquery.signaturepad.min.js"></script>
<div id="cb_sign_wrapper_edit">

Set the Signature field as Hidden.
Add an HTML block after the Signature field.
On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

Then add this code:

<!-- HTML Block code -->
<div class="sigPad">
    <div class="sig sigWrapper">
        <canvas class="pad" width="218" height="55" style="margin: 0px 0px 0px 100px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;"></canvas></br>
        <span style="margin: 0px 0px 0px 264px;">
            <input type="reset" class="clearButton" value="Clear">
        </span>
        <input type="hidden" name="output" class="output">
    </div>
</div>

To capture the signature as an image, create a new virtual field. If there are no existing virtual fields, the new virtual field will be named Virtual1. Otherwise, please take note of the name of the virtual field because the footer script depends on the correct one.
Set the virtual field in step #9 into a Hidden virtual field. No further configuration is necessary.
Repeat steps #5 to #10 for the Sales_Signature field. Take note of the name of the new virtual field as stated in step #8.
Go to the Footer section.
On the footer section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

Then add this code:

<!-- Footer code -->
    <script type="text/javascript">
        $(document).ready(
            function ()
            {
                // TODO: Add your signature fields here in the order they appear on the form -->
                var signatureFields = [
                    ['Signature', [@field:Signature!], 'cbParamVirtual1'],
                    ['Sales_Signature', [@field:Sales_Signature!], 'cbParamVirtual2'],
                ];

                for (var i = 0; i < signatureFields.length; i++)
                {
                    var api = $($('#cb_sign_wrapper_edit .sigPad')[i]).signaturePad({ drawOnly: true });
                    if (api)
                    {
                        api.regenerate(signatureFields[i][1]);
                    }
                }

                $('#cb_sign_wrapper_edit form').submit(
                    function ()
                    {
                        for (var i = 0; i < signatureFields.length; i++)
                        {
                            // Dump signature JSON data into hidden signature field
                            var newSignature = $('#cb_sign_wrapper_edit .output')[i].value;
                            $('#EditRecord' + signatureFields[i][0])[0].value = newSignature;

                            // Capture each signature image into its corresponding [hidden] VIRTUAL field
                            var api = $($('#cb_sign_wrapper_edit .sigPad')[i]).signaturePad({ drawOnly: true });
                            if (api)
                            {
                                api.regenerate(newSignature);
                                $('#' + signatureFields[i][2]).val(api.getSignatureImage());
                            }
                        }
                    }
                );
            }
        );
    </script>
</div>

NOTE: For submission forms, please edit the script in step #14 and change all instances of EditRecord to InsertRecord.

IMPORTANT: Deploy the DataPage in an external HTML file.

mikeg · April 24, 2017

That works!

Thank you for your help.

George43 · February 14, 2019

This code is updated due to event Changes after implementation of Ajax and some changes. This method will work same On Submission Data Page and on the Details Data Page without any code changing

Header Code

 	<!-- Header code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="./jquery.signaturepad.min.js"></script>
<div id="cb_sign_wrapper_edit">
 	<!-- Header code end -->

First Signature code

	<!-- HTML Block code  after hidden field with label Signature (type 64000) and virtual hidden field (CB_Virtual1)-->
<div class="sigPad">
        <div class="sig sigWrapper">
            <canvas class="pad" width="218" height="55" style="margin: 0px 0px 0px 100px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;"></canvas></br>
            <span style="margin: 0px 0px 0px 264px;">
                <input type="reset" class="clearButton" value="Clear">
            </span>
            <input type="hidden" name="output" class="output">
        </div>
    </div>
    <!-- html block end -->

Second Signature code

   <!-- HTML Block code right after hidden field with label Sales_Signature (type 64000) and virtual hidden field2 (CB_Virtual2) -->
<div class="sigPad">
        <div class="sig sigWrapper">
            <canvas class="pad" width="218" height="55" style="margin: 0px 0px 0px 100px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;"></canvas></br>
            <span style="margin: 0px 0px 0px 264px;">
                <input type="reset" class="clearButton" value="Clear">
            </span>
            <input type="hidden" name="output" class="output">
        </div>
    </div>
    <!-- html block end -->

Footer Code

  <!-- Footer code  In order to work propertly Fields names: Signature/Sales_Signature After each should be html block-->
<script type="text/javascript">
    $(document).ready(
        function ()
        {
            // TODO: Add your signature fields here in the order they appear on the form -->
            var signatureFields = [
                ['Signature', [@field:Signature!], 'cbParamVirtual1'],
                ['Sales_Signature', [@field:Sales_Signature!], 'cbParamVirtual2'],
            ];
            

            for (var i = 0; i < signatureFields.length; i++)
            {
                var api = $($('#cb_sign_wrapper_edit .sigPad')[i]).signaturePad({ drawOnly: true });
                if (api)
                {
                     api.regenerate(signatureFields[i][1]);
                }
            }

            
            
            document.addEventListener('BeforeFormSubmit', function(event) {
                for (var i = 0; i < signatureFields.length; i++)
                    {
                        // Dump signature JSON data into hidden signature field
                        var newSignature = $('#cb_sign_wrapper_edit .output')[i].value;
                        if( $('#EditRecord' + signatureFields[i][0])[0]){
                            $('#EditRecord' + signatureFields[i][0])[0].value = newSignature;
                        }
                        if( $('#InsertRecord' + signatureFields[i][0])[0]){
                            $('#InsertRecord' + signatureFields[i][0])[0].value = newSignature;
                        }

                        // Capture each signature image into its corresponding [hidden] VIRTUAL field
                        var api = $($('#cb_sign_wrapper_edit .sigPad')[i]).signaturePad({ drawOnly: true });
                        if (api)
                        {
                            api.regenerate(newSignature);
                            $('#' + signatureFields[i][2]).val(api.getSignatureImage());
                        }
                    }
            });

           
        }
    );
</script>
</div>
<!-- Footer code end -->

This code requires jQuery signature library file in the root of the page on your hosting.

File with Library and Example of the app is attached below.

jquery.signaturepad.min.js

Multiple_Signatures_1_0_2019-Feb-14_1224.zip

Melodybelle · May 7, 2020

Does anyone have an update on getting this to work with Ajax?

I've tried instructions below but can't seem to get it to work.

Also how do I get the link to the jquery.signaturepad.min.js?

Thanks,

On 2/14/2019 at 6:55 AM, George43 said:

This code is updated due to event Changes after implementation of Ajax and some changes. This method will work same On Submission Data Page and on the Details Data Page without any code changing

Header Code


 	<!-- Header code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="./jquery.signaturepad.min.js"></script>
<div id="cb_sign_wrapper_edit">
 	<!-- Header code end -->

First Signature code


	<!-- HTML Block code  after hidden field with label Signature (type 64000) and virtual hidden field (CB_Virtual1)-->
<div class="sigPad">
        <div class="sig sigWrapper">
            <canvas class="pad" width="218" height="55" style="margin: 0px 0px 0px 100px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;"></canvas></br>
            <span style="margin: 0px 0px 0px 264px;">
                <input type="reset" class="clearButton" value="Clear">
            </span>
            <input type="hidden" name="output" class="output">
        </div>
    </div>
    <!-- html block end -->

Second Signature code


   <!-- HTML Block code right after hidden field with label Sales_Signature (type 64000) and virtual hidden field2 (CB_Virtual2) -->
<div class="sigPad">
        <div class="sig sigWrapper">
            <canvas class="pad" width="218" height="55" style="margin: 0px 0px 0px 100px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;"></canvas></br>
            <span style="margin: 0px 0px 0px 264px;">
                <input type="reset" class="clearButton" value="Clear">
            </span>
            <input type="hidden" name="output" class="output">
        </div>
    </div>
    <!-- html block end -->

Footer Code


  <!-- Footer code  In order to work propertly Fields names: Signature/Sales_Signature After each should be html block-->
<script type="text/javascript">
    $(document).ready(
        function ()
        {
            // TODO: Add your signature fields here in the order they appear on the form -->
            var signatureFields = [
                ['Signature', [@field:Signature!], 'cbParamVirtual1'],
                ['Sales_Signature', [@field:Sales_Signature!], 'cbParamVirtual2'],
            ];
            

            for (var i = 0; i < signatureFields.length; i++)
            {
                var api = $($('#cb_sign_wrapper_edit .sigPad')[i]).signaturePad({ drawOnly: true });
                if (api)
                {
                     api.regenerate(signatureFields[i][1]);
                }
            }

            
            
            document.addEventListener('BeforeFormSubmit', function(event) {
                for (var i = 0; i < signatureFields.length; i++)
                    {
                        // Dump signature JSON data into hidden signature field
                        var newSignature = $('#cb_sign_wrapper_edit .output')[i].value;
                        if( $('#EditRecord' + signatureFields[i][0])[0]){
                            $('#EditRecord' + signatureFields[i][0])[0].value = newSignature;
                        }
                        if( $('#InsertRecord' + signatureFields[i][0])[0]){
                            $('#InsertRecord' + signatureFields[i][0])[0].value = newSignature;
                        }

                        // Capture each signature image into its corresponding [hidden] VIRTUAL field
                        var api = $($('#cb_sign_wrapper_edit .sigPad')[i]).signaturePad({ drawOnly: true });
                        if (api)
                        {
                            api.regenerate(newSignature);
                            $('#' + signatureFields[i][2]).val(api.getSignatureImage());
                        }
                    }
            });

           
        }
    );
</script>
</div>
<!-- Footer code end -->

This code requires jQuery signature library file in the root of the page on your hosting.

File with Library and Example of the app is attached below.

jquery.signaturepad.min.jsUnavailable

Multiple_Signatures_1_0_2019-Feb-14_1224.zipUnavailable

Vitalikssssss · May 13, 2020

Hi @Melodybelle,

Original post has been updated recently and it includes now a solution for two signature pads.

Let me know if you run into an issue while implementing this solution.

Thanks,

vitalikssssss

Kurumi · June 8, 2021

Hi Everyone - Just an update, Caspio has a new offer, and it's called App Extensions. Electronic Signature is included as well. You can check this link for reference.

Login

Collecting 2 signatures

Question

mikeg

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

nightowl

Link to comment

Share on other sites

mikeg

Link to comment

Share on other sites

George43

Link to comment

Share on other sites

Melodybelle

Link to comment

Share on other sites

Vitalikssssss

Link to comment

Share on other sites

Kurumi

Link to comment

Share on other sites

Join the conversation

Browse