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

Question

Question

Form Not Persisting with Updated Information

Version 9 Laserfiche Forms
Updated August 26, 2014
asked on August 20, 2014

My form has a single line field named EmpType that is populated by a lookup rule. Then I have a custom HTML field with the following code:

<div align="center"><b><label id="lblEmployeeType"></label></b></div>

 

In javascript, I am populating lblEmployeeType.innerHTML with the value from the EmpType field because I want to use the employee type in a sentence and not see the field box outline. For instance, "As a [EmployeeType], you will receive the following benefits..."

 

    if($("#Field16").val() == FT")
    {
      lblEmployeeType.innerHTML = 'Full Time';
     }
      else if ($("#Field16").val() == "PT")
      {
        lblEmployeeType.innerHTML = 'Part Time';
      }

 

 

When I execute the form, it comes up as I expect, but upon clicking save everything is saved to the repository except the html field I populated.

 

It appears that that when the form is initially rendered the js for the html had not fully executed. Therefore, when it saves it does not save properly. I have noticed that if I change the innerHTML to equal a literal (without basing it on the value in the form) it will persist the form properly. My question is why will it not persist the form properly when the html field is populated from field that was populated by a lookup?

 

 Any help is greatly appreciated.

0 0

Answer

APPROVED ANSWER
replied on August 20, 2014 • Show version history

Custom HTML fields don't have a field variable, so you can't store information in them. You'll need to store the data in another field type.

 

I recommend putting this value in a single line field and using CSS to change the display as desired. If you have something specific in mind, I'm happy to get you started with some CSS rules.

 

Edit: To answer the question at the end of your post, the event your JavaScript is based on is probably not firing when the form loads, so it isn't running when Forms opens it and saves it to the repository. To have it show up in the repository, the lookup and your JavaScript need to run when the form loads.

0 0
replied on August 20, 2014

I think that solution would work for other issues with this I have encountered, but would it allow me to populate the HTML label based on the information in another field?

The bigger concern I have is why does the form not save the exact way I see it on the screen. I can get the form to show the HTML label that I populate but it does not save to the repository because it appears that code is really executing after the form is rendered. Not saving to the repository is the real issue.

Replies

replied on August 20, 2014

The "edit" portion you just posted is the real problem. How can I get it to run when the form loads so it gets saved to the repository?

0 0
View 3 previous replies
replied on August 20, 2014

Does your lookup happen when the form loads? If so, you might just need to adjust your JavaScript slightly to get it to run when the form loads. If your JavaScript is reasonably short and you don't mind posting it I'd be happy to take a look at it.

0 0
replied on August 20, 2014 
$(document).ready(function () {
   // Insert code to run on load here
});

Add that to your javascript, and put in the custom javascript code it should run. Also, make sure that the fields are not read-only as any changes made to that field may not be stored in the imaged version in the repository. You would instead need to have javascript make it appear as if those fields are read-only after it's filled in a regular field, then it will save.

0 3
replied on August 20, 2014 • Show version history

The problem is the order of events. The javascript is executing before the form's data is loaded (specifically before the data lookup rules) so the document ready will not solve this issue. We have thoroughly tested it.

 

Is there a way to make the script run after the data is loaded? I have taken the script down to bare bones to test this. Below is what I have (please note that I also performed the same tests with the document ready and it acted the same):

 

$(function()
  {

   lblEmployeeType.innerHTML = $("#Field5").val();

});

 

When executing the above script, lblEmployeeType.innerHTML is not populated with the value of Field5 on the screen and therefor not being saved to repository.

 

If I change the script and add an alert before assigning the value to the lblEmployeeType (like below), it causes a slight wait and allows the data lookup to complete before I hit the "ok" button on the alert box, which then allows lblEmployeeType to be populated. However, even though it displays on the screen it still does not get saved to the repository.

 

$(function()
  {

    alert ('alert');
    lblEmployeeType.innerHTML = $("#Field5").val();

});

0 0
replied on August 20, 2014

There's a way to periodically check to see if the data lookup is finished, using setTimeout(). Take a look at the answer to this question for an example.

0 0
replied on August 20, 2014

Thank you. That was one of the solutions that I tried earlier and while it did post on the screen after I put the delay in, it still did not save it to the repository. What can we use to get it to save to the repository?

0 0
replied on August 20, 2014

Ideally, you won't have to generate this value each time the form loads.

 

The most reliable way to do this is to populate single line fields instead of custom HTML. That way you can get the values when the user fills out the form, and the fields will be filled out when the form is opened again (when it is saved to the repository or viewed in a user task).

 

If you don't like how fields look for this, I'm happy to give you some pointers on styling them with CSS.

 

0 0
replied on August 26, 2014

I have exhaustively tried many different things and looks like I will have to do it using CSS to see if that will get me close to what I need. Eric - Can you please send me some of the pointers you have talked about? Thank you in advance!

0 0
replied on August 26, 2014

Create a single line field for the employee type value. Give this field the description CSS class.

 

Use this CSS to hide the field's input box and label. Update the background color and border color to match your form's background color. If the form's background color isn't white, you may need to add a background-color to the .description input rule.

.description .cf-label {display:none;}
.description.form-focused {background-color:white;}
.description input {
  padding: 4px;
  appearance: none;
  -webkit-appearance: none; 
  -moz-appearance: none; 
  border: 2px solid white;
}


 

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

Sign in to reply to this post.

Details
Related Posts
Loading ...