Gcobani Mkontwana

Gcobani Mkontwana

  • 1k
  • 1.6k
  • 267.6k

Signaturepad is not working clear button on the form

Mar 16 2023 2:25 AM

Hi Team

I have a signaturepad, created two button one to clear and save(back-end) have not yet do this. But the problem is on clear button(jquery button its not clearing the signaturepad from the form and its a business rule. How can i achieve this my code i did debug no error. is there any mate who can replacate this code and show me what was the issue?

// HTML code
<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>
    <!-- style -- inline buttons and hide -->

        #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;


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

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

  // handle clear button click
      console.log('Clear button clicked!');

  // handle save button click
      var signatureDataURL = signaturePad.toDataURL();

      // send signature to the server.
              signature: signatureDataURL


Answers (3)