jQuery save signature_pad

Change class name on click in jQuery

by kneidels

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
<div class="modal" tabindex="-1" id="exampleModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        

     <div id="signature-pad" class="signature-pad">
		<div class="signature-pad--body">
		  <canvas></canvas>
		</div>
		<div class="signature-pad--footer">
		  <div class="description"><input type="text" id="hiddenSignature" name="hiddenSignature"></div>
			</div>
		  </div>

<button type="button" class="btn btn-primary" id="triggerSave">
Save
</button>

      </div>
     
    </div>
  </div>
</div>




<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}


canvas { border: 1px solid}

JavaScript

var wrapper = document.getElementById("signature-pad");
        var clearButton = wrapper.querySelector("[data-action=clear]");
        var canvas = wrapper.querySelector("canvas");
        var signaturePad = new SignaturePad(canvas, {
          backgroundColor: 'rgb(255, 255, 255)'
        });

  $("#triggerSave").click(function(){
		
    var dataURL = signaturePad.toDataURL();
		$("#hiddenSignature").val(signaturePad.toDataURL("image/png").replace("data:image/png;base64,", ""));
    
    var hiddenSignature = $("#hiddenSignature").val();
    
    var formData = new FormData();
		formData.append('hiddenSignature',hiddenSignature);
   formData.append('foo','bar');
    
		$.ajax({ 
			
			type: "POST", 
			url: "/echo/html", 
			enctype: 'multipart/form-data',
			contentType: false,
			processData: false,  // Important!	
			data: formData , 
			success: function(msg) { 
      	alert(' all good ' + msg);
       }
     });
        

  });