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 Draw It showing "Value"

A type Type It is not showing any "Value" in it

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





All Articles