I am working on a signature capturing plugin named "jsignature" in my project.
I want to add it as one of the fields in my form as below.
But I don't want to use a click function in the form as well as a textarea in the form. Only changing the signature and submitting the data should save in the post. I want to customise this with javascript unfortunately, I am failing in trying to figure this out.
My code looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<!-- jQuery -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/jsignature@2.1.2/libs/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->
<!-- jSignature -->
<style>
#signature {
width: 100%;
height: auto;
border: 1px solid black;
}
</style>
<form method="post" action="test.php">
<!-- Signature area -->
<div id="signature"></div>
<br /> <input type='button' id='click' value='click'>
<textarea id='output' name='sig'></textarea>
<br />
<!-- Preview image -->
<img src='' id='sign_prev' style='display: none;' /> <input
type="submit" name="submit">
</form>
<!-- Script -->
<script>
$(document).ready(function() {
// Initialize jSignature
var $sigdiv = $("#signature").jSignature({
'UndoButton' : true
});
true
$('#click').click(function() {
// Get response of type image
var data = $sigdiv.jSignature('getData', 'image');
// Storing in textarea
$('#output').val(data);
// Alter image source
$('#sign_prev').attr('src', "data:" + data);
$('#sign_prev').show();
});
});
</script>
</html>
I do not know where to change the code. I want to save the data in a database after submitting the form without having any textareas and click buttons. Can someone suggest me a post, tutorial or some help?
