Signaturepad is not working clear button on the form

Guest User

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

    
     
       Signature



// 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
  $('#clearSignatureButton').click(function(){
      console.log('Clear button clicked!');
      signaturePad.clear();
      alert("Test1");
  });

  // handle save button click
  $('#saveSignatureButton').click(function(){
      var signatureDataURL = signaturePad.toDataURL();
      alert("test2");

      // send signature to the server.
      $.ajax({
          type:'POST',
          url:'save_signature.php',
          data:{
              signature: signatureDataURL
          }
      }).done(function(response){
          console.log(response);
      });
  });
});

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Naimish Makwana3y ago
Accepted answer
Hello GCOBANI,

Your inline CSS is created to issue. If you remove it, It will be working.
```
// HTML code

    
     
       Signature 
     
    
    
    
    
    
    
```
// 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 $('#clearSignatureButton').click(function(){ console.log('Clear button clicked!'); signaturePad.clear(); alert("Test1"); }); // handle save button click $('#saveSignatureButton').click(function(){ var signatureDataURL = signaturePad.toDataURL(); alert("test2"); // send signature to the server. $.ajax({ type:'POST', url:'save_signature.php', data:{ signature: signatureDataURL } }).done(function(response){ console.log(response); }); }); });
Thanks

Naimish Makwana

Tuhin Paul3y ago

Consider adding error handling to the AJAX call to handle situations where the signature data cannot be saved to the server.

Tuhin Paul3y ago

An improved version

// HTML code


    
        
            Signature 
            
                
                
                
            
        
    


// JavaScript code
/**

Allows a user to sign using the SignaturePad library.
*/
$(document).ready(function() {
// Initialize signature pad
var canvas = document.getElementById('signatureCanvas');
var signaturePad = new SignaturePad(canvas);

// Handle clear button click
$('#clearButton').click(function(){
console.log('Clear button clicked!');
signaturePad.clear();
alert("Test1");
});

// Handle save button click
$('#saveButton').click(function(){
var signatureDataURL = signaturePad.toDataURL();
alert("test2");

// Send signature to the server
 $.ajax({
     type: 'POST',
     url: 'save_signature.php',
     data: {
         signature: signatureDataURL
     }
 })
 .done(function(response){
     console.log(response);
 })
 .fail(function(xhr, status, error) {
     console.error(xhr, status, error);
     alert("An error occurred while saving the signature.");
 });
});
});