jSignature not displaying when submitted

asked on April 26, 2016

Good Morning,

I have resorted back to using the jSignature library to embed a wet signature into my Laserfiche Form. This is because our internal TMS uses jSignature, and in order to pass the data to my TMS, I must provide SVG data. I posted [This], but did not receive an answer on how to get the SVG data from the Forms Signature field. That said, I'm able to get the signature to work correctly, but I'm running into a problem when submitting the form. The form submits just fine, but the Signature Image (#sigimage) does not appear on my submitted form. Also, several of the hidden fields are displaying on my submitted form. See code/samples below. Any help is much appreciated:

Code for signatures:

//Button clicks
  $('button.approve').click(function() {
	var signatureCheck =  $('#signature').jSignature('getData', 'native');
    
    if (signatureCheck.length === 0) {
    	alert('Signature required.');
    } else {
    $('#q75 input').val("Approve");
	$('#sigimage').show();
    $('#Field97').hide();
    $('#Field74').show();
	$('#signature').hide();
    }
  });
  $('button.reject').click(function() {
	var signatureCheck =  $('#signature').jSignature('getData', 'native');
    
    if (signatureCheck.length === 0) {
    	alert('Signature required.');
    } else {
    $('#q75 input').val("Reject");
	$('#sigimage').show();
    $('#Field97').hide();
	$('#Field74').show();
	$('#signature').hide();
    }   
  });
//End Button clicks
//Decode signature data
    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }

    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }
  $('#Field74').hide();
//End decode
//code for signature
  $('#donebutton').click(function() {
    var signatureCheck =  $('#signature').jSignature('getData', 'native');
    
    if (signatureCheck.length === 0) {
      alert('Signature required.');
    } else {
      $('#sigimage').attr('src', $('#signature').jSignature('getData'));

      var sigData = $('#signature').jSignature('getData','svg')[1];
    $('.sigdata1 textarea').val(htmlEncode(sigData));
    $('#Field74').show();
    $('#signature').hide();
    $('#sigimage').show();

    }
  });
    $('#clearbutton').click(function () {
	$('#signature').jSignature('clear');
    $('#signature').show();
    $('#sigimage').hide();
	$('#Field74').hide();
    });
//end code for signature

HTML Fields:

Signature Field:

<div id="signature"></div>

Signature Image:

<img id="sigimage">

Done/Clear Buttons:

<p><input id="donebutton" type="button" value="Done"> <input id="clearbutton" type="button" value="Clear"></p>

Approve/Reject Buttons:

<div style="text-align: center;"><font size="5"><button class="approve">Approve</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="reject">Reject</button></font></div>

Form with signature image showing correctly:

Submitted Form to Laserfiche:

Please let me know why the image is not displaying correctly after the form is submitted.

Thanks,

Nate

0 0

replied on April 27, 2016 • Show version history

I saw your code for saving the signature data to a field but I didn't see you putting it to the image on submitted form. And the data you saved to the field was svg but it would be easier to save base64 directly.

Here is the script that works, I use submit button because I'm not sure how your approve/reject buttons work (is it on approval form?) Field2 is the field that I used to save data. You can check the logic and update yours accordingly:

$(document).ready(function(){
  if ($('.Submit').length)
  {
    //when not on submitted form
    $("#signature").jSignature();
    $('#donebutton').click(function() {
    var signatureCheck =  $('#signature').jSignature('getData', 'native');
    
    if (signatureCheck.length === 0) {
      alert('Signature required.');
    } else {
      $('#sigimage').attr('src', $('#signature').jSignature('getData'));

    $('#Field2').val($('#signature').jSignature('getData'));
    $('#signature').hide();
    $('#sigimage').show();

    }
  });
    $('#clearbutton').click(function () {
	  $('#signature').jSignature('clear');
      $('#signature').show();
      $('#sigimage').hide();
      $('#Field2').val("");
    });
  }
  else
  {
    //when on submitted form
    $('#signature').hide();
    $('#sigimage').show();
    var sigData = $('#Field2').text();
    $('#sigimage').attr('src', sigData);
  }
})

0 0

Question

Question

jSignature not displaying when submitted

Replies

Sign in to reply to this post.