Jump to content
  • 0
mikeg

Collecting 2 signatures

Question

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?

 

Screen Shot 2017-04-09 at 4.26.06 PM.png

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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:

  1. Add a Header/Footer section to your Details DataPage.
  2. Go to the Header section.
  3. 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/
  4. 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">
  5. Set the Signature field as Hidden.
  6. Add an HTML block after the Signature field.
  7. 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/
  8. 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>
  9. 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.
  10. Set the virtual field in step #9 into a Hidden virtual field. No further configuration is necessary.
  11. 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.
  12. Go to the Footer section.
  13. 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/
  14. 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.

  15. IMPORTANT: Deploy the DataPage in an external HTML file.

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...