onlinecode

PHP Signature Pad Example | E-Signature Pad using Jquery Ajax and PHP

onlinecode

PHP Signature Pad Example | E-Signature Pad using Jquery Ajax and PHP

In this post we will give you information about PHP Signature Pad Example | E-Signature Pad using Jquery Ajax and PHP. Hear we will give you detail about PHP Signature Pad Example | E-Signature Pad using Jquery Ajax and PHPAnd how to use it also give you demo for it if it is necessary.

Today, We will learn how to use e-signature pad using jquery ajax and php. i would like to give you example of php signature pad and save image to database. we will use jquery signature pad & canvas image.

You can easily use jquery ui signature pad and save image using PHP, Laravel and Codeigniter too.

See also  Laravel Vue Datatables Component Example

In this example we will use keith-wood jquery ui signature pad for you can create your signature on it. we will take php form and submit that signature image and store that image into folder. you just have to just create bellow two files and you can get example.

So, let’s create index.php and upload.php file with following instruction.

First of all, you need to download jquery signature js file from here: Download jquery.signature files.

After download, you need to create new folder “asset” and extract download zip file. put jquery.signature.min.js and jquery.signature.css files into asset folder.

You also need to create “upload” folder in your root directory. we will store image on that folder.

See also 

PHP - I Can't get the $_POST Values on Ajax Request

In this post we will give you information about PHP - I Can't get the $_POST Values on Ajax Request. Hear we will give you detail about PHP - I Can't get the $_POST Values on Ajax RequestAnd how to use it also give you demo for it if it is necessary.



I want to share this posts with you because when i was working on native PHP and Ajax Post request(Specially AngularJS Post request) at that time i can't get Post value on form submit. That's why i would like to share you this post. I also want to tell you i was working on my Ubuntu 14.04. I did try lot but i can't get value.

At last find stuff to how to solve this issue, i did use "file_get_contents('php://input')" that way i could get POST value in json object and i also decode json value using "json_decode()". So let's try this way :

Example:

$post = file_get_contents('php://input');
$post = json_decode($post);
$sql = "INSERT INTO items (title) VALUES ('".$post->title."')";
$result = $mysqli->query($sql);

Hope this code and post will helped you for implement PHP - I Can't get the $_POST Values on Ajax Request. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

index.php

<!DOCTYPE html>
<html>
<head>
    <title>PHP Signature Pad Example - ItSolutionStuff.com</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="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"> 
    <script type="text/javascript" src="http://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 >
    <form method="POST" action="upload.php">
        <h1>PHP Signature Pad Example - ItSolutionStuff.com</h1>
        <div >
            <label  for="">Signature:</label>
            <br/>
            <div id="sig" ></div>
            <br/>
            <button id="clear">Clear Signature</button>
            <textarea id="signature64" name="signed" style="display: none"></textarea>
        </div>
        <br/>
        <button >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>

upload.php

Also see:PHP Count Number of Pages in PDF 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.";
?>

I hope it can help you…

Hope this code and post will helped you for implement PHP Signature Pad Example | E-Signature Pad using Jquery Ajax and PHP. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version