You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Setting Read Only Mode on Signature via Javascript

Forms
Updated May 14, 2021
posted on May 13, 2021

Is it possible to set a signature line to Read Only via Javascript? I can capture the image source in a single line text field and populate a custom HTML field with the image of the signature, however, when I save that form to the repository, the signature (in the custom html field) shows as a image with a broken link on the form. 

It would be much simpler, if I could just force the signature field to be Display only from Javascript rather than trying to save the Custom Html field.

Any help would be greatly appreciated.

Thanks!

0 0
replied on May 14, 2021

I figured it out. So, in the javascript below, imgSource represents the single line text field that I am populating with the image source of the signature, when the form is signed. Then I build the image preview "Div" tag, and insert it into the existing signature Div tag. I also have to remove manually some required field attributes, so that I can submit the form. But, it seems to work and I am actually getting the signature to save to the repository like I want it to.

function displaySignature(imgSource) {
  var sigdata = $("#" + imgSource.id + " input").val();
  
  if (sigdata!="") {
    // locate the Signature field and hide it and make it not required
    var sigElement = imgSource.previousSibling;
    var divElement = sigElement.querySelector('div[class="clearfix"]');
    
    var el = divElement.children[1];
    var imgPreview = '<div class="form-sig-preview"><img class="form-sig-img" src="' + sigdata + '"><a href="javascript: void(0)" title="Delete" class="form-sig-remove lfi-times" style="padding:0 5px 0 0;font-size:130%">×</a><a href="javascript: void(0)" title="Edit" class="form-sig-edit lf-icon-signature"></a></div>';
    if (el.tagName != 'DIV')
    {
      $(imgPreview).insertAfter(divElement.children[0]);
    }
    var sigUrlInput = sigElement.querySelector('input[autocomplete="nope"]');
    sigUrlInput.removeAttribute("required");
    
    var sigButton = sigElement.querySelector('input[type="button"]');
    sigButton.classList.add("hidden");
    sigButton.removeAttribute("required");
  }
}


 

0 0
replied on May 14, 2021

So, describing my logic above...

  1. I check the value of the single line hidden text field that should contain the image source string captured in a previous step.
  2. I set the sigElement variable to the sibling element immediately above the hidden single line text field. For this to work the hidden field needs to immediately follow the signature field
  3. Within the signature element, there should be a div tag with the class "clearfix" assigned to it. This is assigned by Forms itself. I locate that Div tag so that I can check the child elements within that tag. The second element (element 1), should be another Div tag with the class "form-sig-preview", if read-only mode is set on the signature element.
  4. If element 1 is not the preview div tag, I insert the Html (imgPreview) after as the second element within the clearfix div tag (i.e. - element 0).
  5. Finally, I remove the required attribute from both the preceding input tag and the signature input element and hide the signature button.
0 0
replied on May 14, 2021

It won't work, because I am using the Current Step Id to hide an approval page on the form until after the form is submitted initially. Once the form is submitted, I want to display all the pages of the form as read-only, except the "Approval" page. If I make the signature line read-only on the field in the layout, it will be read-only for every step. I only want to force it to be read-only after step 1 in the process.

1 0
replied on May 13, 2021 • Show version history

Hi Keith,

Not sure whether I am understanding your case properly. Why using 'Display-only' property on signature field won't work?

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...