Signaturepad to sign form online

Question

Hi Team I need help below how to create a signature for users to sign application online using jquery bootstrap and html. Here is the code below /** * @author:Gcobani Mkontwana * @date:02/03/2023 * Signature pad draws signature * */ var signature = $(#signature).jSignature({'UndoButton':true}); // Front end using html Signature

Rijwan Ansari · Answer

Hi Check below examples. https://medium.com/@divbydiv/build-a-signature-pad-in-html-css-js-canvas-bd174d999392 https://dev.to/stackfindover/how-to-create-signature-pad-in-html-signature-pad-javascript-3866

Guest User · Answer

Hi Tuhin Thanks but i notice when inspect jSignature is not a function is causing my app to crash could be using an outdate library making it difficult to use it and load on the DOM. I wanted to use input value so user can sign there and have hidden button that could reset for making new changes and try again

Tuhin Paul · Answer

Hello Gcobani Modify your code to create a signature pad First include the necessary libraries in your HTML file: Then add the following JavaScript code to create the signature pad and handle the form submission: $(document).ready(function() { // create a new signature pad var signature = $(#signature).jSignature({'UndoButton':true}); // handle form submission $('#submit-button').click(function() { // get the signature data as an image URL var signatureData = signature.jSignature('getData' 'image'); // set the signature data as the value of the signature input field $('#signature-input').val(signatureData); // submit the form $('#application-form').submit(); }); }); Finally modify your HTML form to include the signature pad and signature input field: Signature Submit when the user clicks the Submit button the signature data is retrieved from the signature pad and set as the value of a hidden input field.