Jump to content

Markw

Members
  • Content Count

    0
  • Joined

  • Last visited

  1. Hi,

    I am trying to create a Caspio submission form with multiple signature fields - all of which send the signature images to my table.

    I have tried the multiple signature code on the forum and it doesn't work - it is probably my understanding.

    Here is the code i have used:

    Header code:

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="[@app:SignaturePad/]"></script>
    <div id="cb_sign_wrapper">

    Signature Fields (Hidden):

    Safety_comm_attendee_1_sig

    Safety_comm_attendee_2_sig

    etc

    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>

    Virtual1 Field (Hidden), Virtual2 Field (Hidden) etc

    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 = [
                    ['Safety_comm_attendee_1_sig', [@field:Safety_comm_attendee_1_sig], 'cbParamVirtual1'],
                    ['Safety_comm_attendee_2_sig', [@field:Safety_comm_attendee_2_sig], 'cbParamVirtual2'],
                ];
                

                for (var i = 0; i < signatureFields.length; i++)
                {
                    var api = $($('#cb_sign_wrapper_edit .sigPad')).signaturePad({ drawOnly: true });
                    if (api)
                    {
                         api.regenerate(signatureFields[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').value;
                            if( $('#EditRecord' + signatureFields[0])[0]){
                                $('#EditRecord' + signatureFields[0])[0].value = newSignature;
                            }
                            if( $('#InsertRecord' + signatureFields[0])[0]){
                                $('#InsertRecord' + signatureFields[0])[0].value = newSignature;
                            }

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

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

     

    Regards

    Mark

×
×
  • Create New...