Populating PDF with variable from HTML

asked on July 21, 2021

Hi All,

I am trying to create a form that has a section where the user's name needs to be populated.

For example...As an employee of the City, I, LegalName...

Since the employee has to provide their employee ID, the plan is to populate LegalName via a lookup.

With help from our VAR, the name is displayed in the form when it is on screen, but when the PDF is sent via email and saved to the repository, the name is no longer present, only LegalName.

In the HTML, LegalName was replaced with LegalName

The JavaScript is as follows:

$(document).ready(function () {

//When the Field 25 receives input, it will replace the HTML placeholder
$("#q25 input").change(function(){

var value = document.getElementById('Field25').value;
document.getElementById('LN').innerHTML=Field25.value;

});
});

Field 25 being the field that is populated from the lookup.

The rest of the form contains a Signature and date that are outside of the HTML section. These fields are in the emailed PDF and saved PDF.

Is there a way to have the name written to the PDF within Forms?

Any help is appreciated - Lowell

0 0

replied on July 21, 2021

You're on the right track, but there's a few things you need to account for.

When writing to a PDF the form is created in a Read-Only mode, which you have to adjust your javascript to work with. In this code #q4 is the name field and the custom HTML has a for the data to placed into. If the form is in Read-Only mode you need to find the ".ro" element and grab the .text() instead of getting the val() from an input.

Also be sure to put the text update into it's own function and to call it on page load since you won't have an input to get updated.

$(document).ready(function()
{  
   UpdateName();
   
  $(document).on('change','#q4 input', UpdateName);
      
});

function UpdateName()
{  
    var readOnly = ($('[name=IsLocked]').val() == 'True');
  
    var name = ($('#q4 input').val());
  
    if (readOnly) 
    { 
      	name = $('#q4 .ro').text();
    }
   
    if (name.length <= 0)
    {
        name = "{Name}";
    }
   
    $('span.NameInfo').text(name);
}

0 0

View 1 previous reply

replied on April 27, 2022

Hi Will,

Can you elaborate more on how to take your script and make it work? I'm trying to do something similar with First_Name and Last_Name. I tried taking your example and using it like this:

$(document).ready(function()
{  
   UpdateName();
   
  $(document).on('change','first-name input', UpdateName);
      
});

function UpdateName()
{  
    var readOnly = ($('[name=IsLocked]').val() == 'True');
  
    var name = ($('first-name input').val());
  
    if (readOnly) 
    { 
      	name = $('first-name .ro').text();
    }
   
    if (name.length <= 0)
    {
        name = "{Name}";
    }
   
    $('span.first_name').text(name);
}

In my setup I went to the advanced tab of the "First Name" field and set the CSS to: "first-name"

And then in my HTML section I am calling the class like this:

I, , make this application

I am trying to get this to work on the form and in the PDF it generates.

Any ideas?

0 0

replied on April 27, 2022

James,

Looks like you're missing the Class qualifier "." before the CSS class name in your code in a few instances...

 $(document).on('change','first-name input', UpdateName);

should be

 $(document).on('change','.first-name input', UpdateName);

You need to specify the li element for the field either with a class you've added to it or by the id Laserfiche generates for it, so "#q4" for id of 'q4' or ".first-name" for CSS class of 'first-name'

0 0

replied on May 2, 2022

Thanks for the response Will. I'm still having trouble getting it to update the data actually submitted to the form. Below is what my code looks like. The first two entries work to update the form as you are filling it out.

The second part is where it should be updating the submission, but it isn't. Any ideas?

$(document).on("change", ".first-name", function() {
  $("#first_name").text($(".first-name input").val()).change();
});

$(document).on("change", ".last-name", function() {
  $("#last_name").text($(".last-name input").val()).change();
});

$(document).ready(function()
{  
   UpdateName();
   
  $(document).on('change','.first-name input', UpdateName);
      
});

function UpdateName()
{  
    var readOnly = ($('[name=IsLocked]').val() == 'True');
  
    var name = ($('.first-name input').val());
  
    if (readOnly) 
    { 
      	name = $('.first-name .ro').text();
    }
   
    if (name.length <= 0)
    {
        name = "{Name}";
    }
   
    $('span.first-name').text(name);
}

0 0

replied on May 4, 2022 • Show version history

If your custom HTML has this:

You should update it like this:

$('span.first-name').text(name);

If your custom HTML has this:

You should update it like this:

$('span#first-name').text(name);

OR JUST

$('#first-name').text(name);

In my example I used "firstName" as a CSS class so that I could have multiple spans with the class "firstName" and update all of them.

If you use a span with an Id of "first-name" then it should be the only span with that Id as element Ids are intended to be unique.

0 0

Question

Question

Populating PDF with variable from HTML

Replies

Sign in to reply to this post.