e-Signature Pad Using Jquery AJAX and PHP | Digital Signature Pad On Submission Form

Digital Signature Pad On Submission Form

e-Signature Pad Using Jquery AJAX and PHP Signature Pad is a jQuery module that undertakings HTML5 canvas part and javascript to make an adaptable and smooth Signature Pad on your site page and application. There are a lot of approaches to permit clients to attract a mark a program window, many including sharp jQuery modules. Everything is going advanced and this is the future we should all anticipate. Here are the best advanced mark modules I’ve found.

Live Demo   Download Source Code


<!DOCTYPE html>
		<meta charset="utf-8">
		<title>jQuery Signature Pad & Canvas Image</title>
		<link href="./css/jquery.signaturepad.css" rel="stylesheet">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="./js/numeric-1.2.6.min.js"></script> 
		<script src="./js/bezier.js"></script>
		<script src="./js/jquery.signaturepad.js"></script> 
		<script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
		<script src="./js/json2.min.js"></script>
		<style type="text/css">
			#btnSaveSign {
				color: #fff;
				background: #f99a0b;
				padding: 5px;
				border: none;
				border-radius: 5px;
				font-size: 20px;
				margin-top: 10px;
				margin: 50px auto;
			.sign-container {
				width: 60%;
				margin: auto;
			.sign-preview {
				width: 150px;
				height: 50px;
				border: solid 1px #CFCFCF;
				margin: 10px 5px;
			.tag-ingo {
				font-family: cursive;
				font-size: 12px;
				text-align: left;
				font-style: oblique;

		<h2>Learn Infinity | jQuery Signature Pad & Canvas Image</h2>
		<div id="signArea" >
			<h2 class="tag-ingo">Put signature below,</h2>
			<div class="sig sigWrapper" style="height:auto;">
				<div class="typed"></div>
				<canvas class="sign-pad" id="sign-pad" width="300" height="100"></canvas>
		<button id="btnSaveSign">Save Signature</button>
		<div class="sign-container">
		$image_list = glob("./doc_signs/*.png");
		foreach($image_list as $image){
			//echo $image;
		<img src="<?php echo $image; ?>" class="sign-preview" />
			$(document).ready(function() {
				$('#signArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90});
				html2canvas([document.getElementById('sign-pad')], {
					onrendered: function (canvas) {
						var canvas_img_data = canvas.toDataURL('image/png');
						var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");
						//ajax call to save image inside folder
							url: 'save_sign.php',
							data: { img_data:img_data },
							type: 'post',
							dataType: 'json',
							success: function (response) {



	$result = array();
	$imagedata = base64_decode($_POST['img_data']);
	$filename = md5(date("dmYhisA"));
	//Location to where you want to created sign image
	$file_name = './doc_signs/'.$filename.'.png';
	$result['status'] = 1;
	$result['file_name'] = $file_name;
	echo json_encode($result);


You May Also Like

About the Author: admin


    1. Hello, Ashish! Do you want to reset canvas please use the code below

      “var signaturePad1 = new SignaturePad(sign1_canvas);

      Thank you for visiting us…..have a nice day.

  1. Uncaught ReferenceError: SignaturePad is not defined when use –
    var signaturePad1 = new SignaturePad(sign1_canvas);


  2. Can you show an example of how you would create a clear button to clear the canvas?
    What would the jquery look like for this button?

  3. how if i want send to database, i try its only send name file without extention (.png), so i can’t view the signature from table.

  4. Hi Admin, i tried to clear the canvas using yr method but it says Uncaught ReferenceError: SignaturePad is not defined…Besides, after i managed to clear the canvas using

    var c = document.getElementById(‘myCanvas’);
    var ctx = c.getContext(‘2d’);
    ctx.clearRect(0, 0, 200, 100);

    and started to draw, the old drawing reappears, what should i do??

  5. hi
    These is the code for clear canver

    $(‘#signArea’).signaturePad().clearCanvas ();

    1. Worked smooth as silk AFTER I made a ever so slight adjustment. I copy/pasted and it didn’t even complete the sign area to show up. This worked smoothly


  6. What if I needed to insert two canvas and saving both signatures?
    I managed to make them work, however the script will only generate the first signature.

  7. hello dear, I just want to know one thing that, how to save the result of canvas in xampp or wampp server. kindly help me to solve this query

  8. I want to change the file name ($filename = md5(date(“dmYhisA”));) and make it dynamic
    can you help me
    thanks in advance

  9. Here is the clear working script


    $(document).ready(function() {$(‘#btnClearSign’).click(function(e){$(‘#signArea’).signaturePad().clearCanvas ();});});

  10. The source files can be downloaded by clicking the SKIP THIS AD button top right on the advertising page

    This takes you to a download page on mediafire

  11. Hi ..Very Good Process this !!

    Is there any way to prevent the blank signature uploading to the folder?
    If anything, Please update.

  12. i want to use this along my form its storing in that folder i want to show it along with other form data in database

Leave a Reply

Your email address will not be published. Required fields are marked *