Signature Pad - "Type It" doesn't work
I'm trying to use this (GitHub) where my "Draw It" works as expected, but the "Type" function isn't giving me any value in my field inputHidden
.
Please view the VF page code and screenshot for more information:
Draw it
A type
VF page code
<apex:page standardController="Case" extensions="signaturepadCaseController">
<apex:includeScript value="{!URLFOR($Resource.jQuery,'js/jquery-1.6.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.signature,'/signature/json2.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.css')}" />
<form method="post" action="#" class="sigPad">
<label for="name">Print your name</label>
<input type="text" name="name" id="name" class="name"/>
<p class="typeItDesc">Review your signature</p>
<p class="drawItDesc">Draw your signature</p>
<ul class="sigNav">
<li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
<li class="drawIt"><a href="#draw-it">Draw It</a></li>
<li class="clearButton"><a href="#clear">Clear</a></li>
</ul>
<canvas class="pad" width="198" height="55" id="signatureCanvas1"></canvas>
<div class="sig sigWrapper">
<div class="typed" id="typeit">
</div>
<canvas class="pad" width="198" height="55" id="signatureCanvas"></canvas>
<input type="hidden" name="output" class="output" id="hidden"></input>
</div>
<input type="button" onclick="saveSignature();" value="Accept" class="btn" target="_parent" />
</form>
<script>
// $('.sigPad').signaturePad(options);
j$ = jQuery.noConflict();
var api;
j$(document).ready(function() {
api = j$('.sigPad').signaturePad();
});
var canvas;
var canvas1;
var RecordID = '';
function saveSignature() {
canvas = document.getElementById("signatureCanvas");
canvas1 = document.getElementById("signatureCanvas1");
// if(j$('#hidden').val() == ''){
// alert('Please draw your signature');
// }
// else{
RecordId = '{!caseId}';
var imgData;
typeSign = j$('#typeit').text();
if (typeSign != '') {
var ctx = canvas1.getContext("2d");
ctx.fillText(typeSign, 10, 10);
}
imgData = canvas1.toDataURL("image/jpeg");
imgData = imgData.split(',')[1];
console.log('---'+imgData);
strDataURI = imgData;
SignaturePad.signaturepadCaseController.saveSignature(strDataURI, RecordId, handleResult);
// }
}
function handleResult(result) {
if (result.indexOf('success:true')) {
//window.top.location = '/{!Case.id}';
} else {
alert(result);
}
}
</script>
</apex:page>
+3
source to share
No one has answered this question yet
Check out similar questions: