Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Markw

  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):




    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">
            <input type="hidden" name="output" class="output">

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

    Footer Code:

    <script type="text/javascript">
            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)

                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)
                                $('#' + signatureFields[2]).val(api.getSignatureImage());

    <!-- Footer code end -->




  • Create New...