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.

7 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?

 

 

0 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.