Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi Team

I have a button to clear the signature but its not clearing and have used the correct library signaturepad_min.js latest one. There are no errors from the console browser. What could be the problem?

What I have tried:

HTML

<div class="single-form">
                                <div id="signature-pad" class="sig sigWrapper">
                                 <div class="display-block signature-pad" style="touch-action: none;">
                                   <label for="signatureInput">Signature </label>
                                 <div class="signature-input-container">
                                <canvas id="signatureCanvas"></canvas>
                                <button id="clearSignatureButton" class="signature-button">Clear</button>
                                <button id="saveSignatureButton" class="signature-button">Save</button>
                                </div>
                                </div>
                                </div>
                                <!-- style -- inline buttons and hide -->
                                 <style>

                                    #signature-pad {
                                    display: inline-block;
                                    position: relative;
                                    }

                                    #signature-pad .display-block {
                                    display: inline-block;
                                    }

                                    #signature-pad .sigWrapper {
                                    height: 50px;
                                    width: 300px;
                                    border: 1px solid #ccc;
                                    position: relative;
                                    margin-right: 10px;
                                    }
                                    #signature-pad canvas {
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    }
                                    #signature-pad button {
                                     display: inline-block;
                                    }

                                 </style>
                            </div>


// Javascript
/**
 * @author:Gcobani Mkontwana
 * @date:15/06/2023
 * @signature to allow a user to sign using jquery library.
 * 
 */


// initialize signature pad
// initialize signature pad
var canvas = document.getElementById('signatureCanvas');
var signaturePad = new SignaturePad(canvas);


// handle clear button click
clearSignatureButton.addEventListener('click', function(){
    console.log("clicked button cleared");
    signaturePad.clear();
});


// Handle save button  click
var saveSignatureButton = document.getElementById('saveSignatureButton');
saveSignatureButton.addEventListener('click', function(){
    var signatureDataURL = signaturePad.toDataURL();

    // send signature to the server.
    $.ajax({
        type:'POST',
        url:'save_signature.php',
        data:{
            signature: signatureDataURL
        }
    }).done(function(response){
        console.log(response);
    });
});
Posted
Comments
Member 15627495 15-Mar-23 7:48am    
one line seems to be missing :
var ClearSignatureButton = document.getElementById('ClearSignatureButton')
Gcobani Mkontwana 15-Mar-23 8:00am    
@Member 15627495 i did put this on the clear button functionality still its not clearing the signature and no errors when inspect the element. and put consol.log(signaturePad) do get the list of properties but undefined some(onEnd) onBegin.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900