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

Discussion

Discussion

Answer: Using "DIV" to place store-able input fields into HTML text blocks.

posted on September 26, 2014 Show version history

Hi all,

 

I've seen some questions on here regarding custom HTML input boxes not saving values.  I believe we've found a very easy way to make this a reality.  See the series of screenshots below (excerpt of Domestic No-Contact Order):

 

 

The Custom HTML for the block is:

<b>IT IS ORDERED THAT DEFENDANT IS PROHIBITED FROM:</b>
<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><ul><li>Causing or attempting to cause physical harm, bodicly injury, assault,
 including sexual assault, and from molesting, harassing, threatening, or 
stalking the protected person(s).</li>
<li>Coming near and from having any contact whatsoever, in person or through 
others, by phone, mail or any means, directly or indirectly, except for 
mailing or service of process of court documents by a 3rd party or contact 
by defendant's lawyers with the protected person(s).</li>
<li>Entering or knowingly coming within or knowingly remaining within <div 
id="txtDistancePlaceHolder">DISTANCE</div> (distance) of the protected 
person(s)'s &nbsp;&nbsp;<div id="chkBoxes"></div></li></ul></blockquote>

 

The important lines to notice above are:

<div id="txtDistancePlaceHolder">DISTANCE</div>

and

<div id="chkBoxes"></div>

 

Once those locators are put into place we use JavaScript to move the input fields above the block into the text block:

$(document).ready(function(){
  
  //MOVE THE DISTANCE FIELD
  //Find the controls
  var divDist = $('#txtDistancePlaceHolder');
  var txtDist = $('#q33 DIV.cf-field INPUT, #q33 DIV.cf-field SPAN');//Search for INPUT or SPAN, SPAN is used for display
  //Remove the textbox from its current location
  txtDist.remove();
  //Insert it after the place holder
  txtDist.insertAfter(divDist);
  //Remove the place holder
  divDist.remove();
  //Hide the old distance label
  $('#q33').hide();
  
  var chkTarget = $('#chkBoxes');
  var chkSource = $('#q34 DIV.cf-field DIV');
  
  chkSource.remove();
  chkSource.insertAfter(chkTarget);
  chkTarget.remove();
  $('#q34').hide();
  
});

The end result when filling out this form is:

 

 

And the final result when storing the form is:

 

I wouldn't have been able to produce this on my own, and I'd like to thank Michael Mathys, our Director of Development here at Cities Digital for helping to make this a reality.

11 0
replied on May 11, 2023

I replicated the same exercise for laserfiche 11 but it is not function 

 

do you have some ideas for this my format is pdf or tiff?

HTML personalizado.png
result.png
prueba.png
result.png (32.42 KB)
prueba.png (18.21 KB)
0 0
replied on May 12, 2023 Show version history

If you follow the link I posted you can see my example, that has been tested in 11 and works. The difference I spotted between our two code snips is that I have three parts(DIV, INPUT and SPAN) I'm grabbing instead of two (INPUT and SPAN).  

  //Search for DIV, INPUT or SPAN, SPAN is used for display
  var txtFieldOne = $('.dcFiscalYearOne DIV.cf-field DIV, .dcFiscalYearOne DIV.cf-field INPUT, .dcFiscalYearOne DIV.cf-field SPAN');

 

link to my Laserfiche Answers post: https://answers.laserfiche.com/questions/180418/Is-there-a-way-to-insert-an-input-field-into-a-table-header

 

EDIT: the code snip above is from another form I did the same thing on so that is why the variable name is different. 

1 0
replied on May 16, 2023

ok, yes it works, but i have another problem, if you use DIV when you generate the PDF OR TIFF file it generates a space , like this example.

any solution?? please

L01.png
L02.png
CODE.png
L01.png (8.56 KB)
L02.png (45.36 KB)
CODE.png (124.46 KB)
0 0
replied on May 17, 2023

What does you HTML and CSS look like for that DIV. I suspect the issue is there.  Maybe a width setting. 

 

0 0
replied on November 4, 2020

This doesn't seem to work anymore. It will not allow me to add the div control to the Custom HTML field. Whenever I add one, it just automatically deletes it.

replied on November 2, 2020

I just wanted to share that I was able to use the conversation here to move a couple input boxes into a table header labels.

Here is the link to where I posted a question on how to do this: https://answers.laserfiche.com/questions/180418/Is-there-a-way-to-insert-an-input-field-into-a-table-header#180469

 

0 0
replied on July 13, 2020 Show version history

I know this is an old thread, but I am using this bit of code and am wondering how you would be able to set required on one of those inline fields?

--Edit: Never mind, the field is still available so you can add the required class.

0 0
replied on August 8, 2018

Thank you for this post, it is really helpful even 4 years later!

0 0
replied on December 1, 2016

Hi Eric,

 

It appears that this solution no longer works in Laserfiche 10.1.

The DIVs do not appear in any stored results / PDFs / submission reviews.

In the above example, the $ figures, term and initial set up fee used to populate with values as per the example in this post. They no longer show anything.

Does anyone else have a work around?

 

 

1 0
replied on August 19, 2015

Hey Eric,

This is a great tool and really appreciate you posting!  From your post, I've got this working with a checkbox, but cannot figure out how to do something similar with a Date Field and/or Signature Field.  I've tried the Date and it brings the field into my HTML, but leaves the date picker and default value (today) out of the field.  Any ideas on how to include this??  Below is my code for the date.  

$(document).ready(function(){
  var chkTarget = $('#date');
  var chkSource = $('#q5 DIV.cf-field DIV, #q5 DIV.cf-field INPUT, #q5 DIV.cf-field SPAN');
  
  chkSource.remove();
  chkSource.insertAfter(chkTarget);
  chkTarget.remove();
  $('#q5').hide();
});

Thanks,

Nate

0 0
replied on September 26, 2014

That's pretty cool! Nice work.

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

Sign in to reply to this post.