E-Signature Pad using jQuery, Ajax and PHP

Hariom Prajapati

21 Jun 2022

PHP

E-Signature Pad using jQuery, Ajax and PHP

In this tutorial we will learn how to create e-signature pad using jQuery, Ajax and PHP and also save image to database.

Here we will use keith-wood jquery ui signature pad to create signature on it.

So let’s follow below steps to create PHP signature pad.

Step 1 – Create

1) index.php and

2) upload.php file

In first step you need to create index.php file and upload.php file.

Step 2 – jQuery signature file

Now you need to download file from here - jQuery signature file .

Step 3 – Create new folder "asset"

Create a new folder with folder name "asset".

Step 4 – extract jQuery signature file

Extract the downloaded file and then follow below steps.

Step 5 – Copy both files

1) jquery.signature.min.js

2) jquery.signature.css

Now copy -

1) jquery.signature.min.js

2) jquery.signature.css files from downloaded file and then paste it into "asset" folder.

Step 6 – Copy and paste below code inside index.php file

<!DOCTYPE html>
<html>

<head>
    <title>E-Signature Pad using jQuery, Ajax and PHP</title>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css"
        rel="stylesheet">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="asset/jquery.signature.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asset/jquery.signature.css">
    <style>
        .kbw-signature {
            width: 400px;
            height: 200px;
        }

        #sig canvas {
            width: 100% !important;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <form method="POST" action="upload.php">
            <h1>E-Signature Pad using jQuery, Ajax and PHP</h1>
            <div class="col-md-12"> <label class="" for="">Signature:</label> <br />
                <div id="sig"></div> <br /> <button id="clear">Clear</button> <textarea id="signature64" name="signed"
                    style="display: none"></textarea>
            </div> <br /> <button class="btn btn-success">Submit</button>
        </form>
    </div>
    <script type="text/javascript">
        var sig = $('#sig').signature({
            syncField: '#signature64',
            syncFormat: 'PNG'
        });
        $('#clear').click(function (e) {
            e.preventDefault();
            sig.signature('clear');
            $("#signature64").val('');
        });
    </script>
</body>

</html>

Step 7 – Copy and paste below code inside upload.php file

<?php
    $folderPath = "upload/";
    $image_parts = explode(";base64,", $_POST['signed']);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
    $image_base64 = base64_decode($image_parts[1]);
    $file = $folderPath . uniqid() . '.'.$image_type;
    file_put_contents($file, $image_base64);
    echo "Signature Uploaded Successfully.";
?>

Output

jquery

E-Signature Pad using jQuery, Ajax and PHP