Reputation: 125

Printing form with jquery printThis

I am pulling my hair out trying to get the inputs of my form to print. I have tried PrintThis, printElement, window.print and every other iteration of a print solution and just cannot get it to work.

As a background- this is a multi-page form using jquery, jqmobile, html5, css3. It has multiple types of inputs including multi-selects, radios, text, etc. I would like to print all of the input but do not necessarily need to have the form layout.

Here is a sample of my code, as it is very long and intensive I will only put up a sample:

The head section

<head>
  <meta charset="UTF-8">  

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="form.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
 <script src="jquery.maskedinput.min.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.min.js"></script>
<script type="text/javascript" src="jquery.printElement.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->
<script>
$(document).bind('mobileinit', function() {
$.mobile.page.prototype.options.addBackBtn= true;
$.mobile.page.prototype.options.backBtnText="Back";
 $.mobile.page.prototype.options.backBtnIcon="arrow-1";
$.mobile.selectmenu.prototype.options.nativeMenu = false;
})
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
 <script>
function formSubmit()
{
            document.getElementById("SiteVisit").action = "mailto:[email protected]?cc=" + document.getElementById("RelBy1").value + "&subject=Site%20Visit%20Form";
            document.getElementById("SiteVisit").submit();
}
</script>   
 <title>Site Visit Form</title>
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="Viewport" content="width-device-width, initial-scale'1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
</head>

A section of the body

<header><h1>Site Visit Form</h1></header>
<form method="post" enctype="text/plain" name="SiteVisit" id="SiteVisit">
      <div data-role="page" id="chapter3">
 <div data-role="header">
 <h1>Field Assessments</h1>
 </div><!--/header-->

  <script>
  $(document).ready(function() {
  $("input[name='ProjectID']").on('change',function(){
 var val = $(this).val();
 var h = $("#chapter3").find("div[data-role='header']").find("h1");
 $(h).html( $(h).html() + " " + val);
 });
  })
 </script>
 <div data-role="content" id="Field">
           <fieldset><div class="_100">
<div class="_20">Time:<input type="time" name="time2"> </div>
<div class="_20">Water Temp:<input type="text" name="temp"> </div>

<div class="_20"  data-role="controlgroup" data-mini="true" data-type="horizontal">
  <label><br /></label>
<input type="radio" name="temp" id="radC" value="C">
      <label for="radC">C&#176;</label>
<input type="radio" name="temp" id="radF" value="F">
  <label for="radF">F&#176;</label> </div>
<div class="_20">Air Temp:<input type="text" name="air"> </div>

<div class="_20" data-role="controlgroup" data-mini="true" data-type="horizontal">
  <label><br /></label>
 <input type="radio" name="Atemp" id="radAC" value="C">
      <label for="radAC">C&#176;</label>
<input type="radio" name="Atemp" id="radAF" value="F">
  <label for="radAF">F&#176;</label> </div></div>
<div class="_100">              
<div class="_25">SC (uS/cm):<input type="text" name="SC">  </div>
<div class="_25">pH:<input type="text" name="ph">   </div>
<div class="_25">DO (mg/L):<input type="text" name="DO"></div>
<div class="_25">DO Saturation %:<input type="text" name="sat"> </div>
 </div>
 <div class="_100">
<div class="_33">Bar Pressure (mm/Hg):<input type="text" name="pressure"></div>
<div class="_33">Turbidity (NTU):<input type="text" name="turbidity"></div>
<div class="_33">Turbidity<select id="Turb" data-iconpos="left" data-icon="grid">
            <option value = "0">  </option>
           <option value = "Clear">Clear</option>
           <option value = "Slight">Slight</option>
           <option value = "Turbid">Turbid</option>
           <option value = "Opaque">Opaque</option>
           </select></div>
</div>
<div class="_100">
<div class="_30">Flow (cfs):<input type="text" name="flow"></div>

 <div data-role="controlgroup" class="_30">
<label for = "chkdry">Dry Bed</label>
   <input type = "checkbox" id="chkdry" value="Yes" data-mini="true">
 <label for="chkPool">Stranded Pools</label>            
   <input type="checkbox" id="chkPool" value="Yes" data-mini="true">
         </div>

  <div class="_40"> <label class=select for=Method>Method</label>
  <select id="Method" data-iconpos="left" data-icon="grid">
            <option value = "0">  </option>
           <option value = "Meter">Meter</option>
           <option value = "Doppler">Doppler</option>
           <option value = "Float">Float</option>
           <option value = "Gage">Gage</option>
           <option value = "VE">Visual Estimate</option>
           </select></div></div>
      </fieldset>

              <fieldset>
                <div class="_100">
       <div class="_50"><Label class=select for=FieldForms>Field Forms</label>
         <select id = "FieldForms" multiple name=FieldForms data-iconpos="left" data-icon="grid">
           <OPTION>Select all that apply:</OPTION>
       <option value = "Aquatic Plant Visual Assessment">Aquatic Plant Visual Assessment</option>
           <option value = "Photos">Photos</option>
           <option value = "Aquatic Plant Tracking Form">Aquatic Plant Tracking Form</option>
           <option value = "Rosgen Form">Rosgen Form</option>
           <option value = "NRCS Form">NRCS Form</option>
           <option value = "EMAP Forms">EMAP Forms</option>
           <option value = "Summary Form">Summary Form</option>
           <option value = "Channel Cross-Section">Channel Cross-Section</option>
           <option value = "Total Discharge">Total Discharge</option>
        </select></div>
<div class="_50"><Label class=select for=DataLoggers>Data Loggers</label>
         <select id = "DataLoggers" multiple name=DataLoggers data-iconpos="left" data-icon="grid">
           <OPTION>Select all that apply:</OPTION>
           <option value = "Temperature">Temperature</option>
           <option value = "YSI">YSI</option>
           <option value = "TruTrack">TruTrack</option>
           <option value = "AquaRods">AquaRods</option>
           <option value = "Weather Station">Weather Station</option>
           <option value = "MiniDOT">MiniDOT</option>
        </select></div></div>

   </fieldset></div>
       <div data-role="footer" data-id="SVFnav">
       <div data-role="navbar">
       <ul>
       <li><a href="#chapter1"><h4>Site Info</h4></a></li>
        <li><a href="#chapter2"><h4>Samples</h4></a></li>
         <li><a class="ui-btn-active ui-state-persist"><h4>Field</h4></a></li>
          <li><a href="#chapter4"><h4>Comments</h4></a></li>
           <li><a href="#chapter5"><h4>Lab Info</h4></a></li>
           </ul>
           </div></div>
           </div>
   </body>
 </form>

Here is the latest script for the button

  <script type="text/javascript" src="printThis.js"></script>
 <input type="button" id="printThis" onclick="printThis()" data-icon="gear" data-theme="b" value="Print" />
 <script>
 $(document).ready(function() {
$("#printThis").click(function() {
$('#Site,#Samples,#Field,#Comments').printThis( {
  debug: true,
  importCSS: true,
  printContainer: false,
  loadCSS: "form.css",
  pageTitle: "Site Visit Form",
  removeInline: false});
});
});
</script>

(#Site,#Samples,#Field,#Comments are the page IDs). This prints the form but the only inputs it prints are the selects & radios not the text. I need all of the imputs from the completed form.

I also tried the following

 <div data-role="header">
 <h1>Lab Information</h1>
  <input type="button" class="ui-btn-right" id="print" onclick="printElement" data-icon="gear" data-theme="b" value="Print" />
 </div><!--/header-->

 <script>
 $(document).ready(function() {
 $("#print").click(function(){
printElement({ printMode: 'popup' });
});
function printElem(options){
$('#SiteVisit').printElement(options);
}
 });

</script>

(SiteVisit is the id for the form)

I know it ain't pretty, I'm a work in progress but can someone please tell me where I am going wrong. My bosses are starting to get unhappy with the time it is taking for me to figure this out

Upvotes: 1

Answers (1)

oceanfrog

Reputation: 11

Just found an answer to this, myself.

Check this page here on StackOverflow:

Is there a way to clone form field values in jQuery or javascript?

You need to touch the values, making them explicit in the "value" attribute. So you need to alter the printThis plugin directly.

Working from version 1.3 of the printThis plugin, I added the following lines after the line adding the header (line 92):

$('input:text').each(function() {
    $(this).attr('value', $(this).val());
});

Then, I changed the line that appends the code (when the option printContainer is set to false), on line #99:

$doc.find("body").append($(this).html());

becomes

$doc.find("body").append($(this).clone(true));

which makes sure that the data passed contains the values.

Be sure to set printContainer to false in the options when you call printThis!

This should solve your problem. Probably too late to help you, but it should help the next person, at least.

Upvotes: 1

Printing form with jquery printThis

Answers (1)

Related Questions