ezIQchad

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

Chad did an amazing job helping us get the Auto Tab accurate. He was quick, professional and precise. He even helped us with a work around for our barcode scanning needs.

Hi,

The purpose of a forum is to share the knowledge.

If you have a question. Ask it on the forum. If you must, ask me to look at it and I will, but it must already be a question on the forum.

Let's make sure we share the knowledge.

CHAD