<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>
/** * @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); }); });
var ClearSignatureButton = document.getElementById('ClearSignatureButton')
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)