title: Printing form with jquery printThis
body: <p>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.</p>
  
  <p>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.  </p>
  
  <p>Here is a sample of my code, as it is very long and intensive I will only put up a sample:</p>
  
  <p>The head section
      
      </p>
  
  <pre><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;  
  
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="form.css" /&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt; &lt;/script&gt;
   &lt;script src="jquery.maskedinput.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="json2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.printElement.min.js"&gt;&lt;/script&gt;
  &lt;!--[if lt IE 9]&gt;
  &lt;script type="text/javascript" src="flashcanvas.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;script&gt;
  $(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;
  })
  &lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
   &lt;script&gt;
  function formSubmit()
  {
              document.getElementById("SiteVisit").action = "mailto:Library@gmail.com?cc=" + document.getElementById("RelBy1").value + "&amp;subject=Site%20Visit%20Form";
              document.getElementById("SiteVisit").submit();
  }
  &lt;/script&gt;   
   &lt;title&gt;Site Visit Form&lt;/title&gt;
  &lt;meta name="HandheldFriendly" content="True" /&gt;
  &lt;meta name="MobileOptimized" content="320" /&gt;
  &lt;meta name="Viewport" content="width-device-width, initial-scale'1.0" /&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>A section of the body
      </p>
  
  <pre><code>&lt;header&gt;&lt;h1&gt;Site Visit Form&lt;/h1&gt;&lt;/header&gt;
  &lt;form method="post" enctype="text/plain" name="SiteVisit" id="SiteVisit"&gt;
        &lt;div data-role="page" id="chapter3"&gt;
   &lt;div data-role="header"&gt;
   &lt;h1&gt;Field Assessments&lt;/h1&gt;
   &lt;/div&gt;&lt;!--/header--&gt;
  
    &lt;script&gt;
    $(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);
   });
    })
   &lt;/script&gt;
   &lt;div data-role="content" id="Field"&gt;
             &lt;fieldset&gt;&lt;div class="_100"&gt;
  &lt;div class="_20"&gt;Time:&lt;input type="time" name="time2"&gt; &lt;/div&gt;
  &lt;div class="_20"&gt;Water Temp:&lt;input type="text" name="temp"&gt; &lt;/div&gt;
  
  &lt;div class="_20"  data-role="controlgroup" data-mini="true" data-type="horizontal"&gt;
    &lt;label&gt;&lt;br /&gt;&lt;/label&gt;
  &lt;input type="radio" name="temp" id="radC" value="C"&gt;
        &lt;label for="radC"&gt;C&amp;#176;&lt;/label&gt;
  &lt;input type="radio" name="temp" id="radF" value="F"&gt;
    &lt;label for="radF"&gt;F&amp;#176;&lt;/label&gt; &lt;/div&gt;
  &lt;div class="_20"&gt;Air Temp:&lt;input type="text" name="air"&gt; &lt;/div&gt;
  
  &lt;div class="_20" data-role="controlgroup" data-mini="true" data-type="horizontal"&gt;
    &lt;label&gt;&lt;br /&gt;&lt;/label&gt;
   &lt;input type="radio" name="Atemp" id="radAC" value="C"&gt;
        &lt;label for="radAC"&gt;C&amp;#176;&lt;/label&gt;
  &lt;input type="radio" name="Atemp" id="radAF" value="F"&gt;
    &lt;label for="radAF"&gt;F&amp;#176;&lt;/label&gt; &lt;/div&gt;&lt;/div&gt;
  &lt;div class="_100"&gt;              
  &lt;div class="_25"&gt;SC (uS/cm):&lt;input type="text" name="SC"&gt;  &lt;/div&gt;
  &lt;div class="_25"&gt;pH:&lt;input type="text" name="ph"&gt;   &lt;/div&gt;
  &lt;div class="_25"&gt;DO (mg/L):&lt;input type="text" name="DO"&gt;&lt;/div&gt;
  &lt;div class="_25"&gt;DO Saturation %:&lt;input type="text" name="sat"&gt; &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="_100"&gt;
  &lt;div class="_33"&gt;Bar Pressure (mm/Hg):&lt;input type="text" name="pressure"&gt;&lt;/div&gt;
  &lt;div class="_33"&gt;Turbidity (NTU):&lt;input type="text" name="turbidity"&gt;&lt;/div&gt;
  &lt;div class="_33"&gt;Turbidity&lt;select id="Turb" data-iconpos="left" data-icon="grid"&gt;
              &lt;option value = "0"&gt;  &lt;/option&gt;
             &lt;option value = "Clear"&gt;Clear&lt;/option&gt;
             &lt;option value = "Slight"&gt;Slight&lt;/option&gt;
             &lt;option value = "Turbid"&gt;Turbid&lt;/option&gt;
             &lt;option value = "Opaque"&gt;Opaque&lt;/option&gt;
             &lt;/select&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="_100"&gt;
  &lt;div class="_30"&gt;Flow (cfs):&lt;input type="text" name="flow"&gt;&lt;/div&gt;
  
   &lt;div data-role="controlgroup" class="_30"&gt;
  &lt;label for = "chkdry"&gt;Dry Bed&lt;/label&gt;
     &lt;input type = "checkbox" id="chkdry" value="Yes" data-mini="true"&gt;
   &lt;label for="chkPool"&gt;Stranded Pools&lt;/label&gt;            
     &lt;input type="checkbox" id="chkPool" value="Yes" data-mini="true"&gt;
           &lt;/div&gt;
  
    &lt;div class="_40"&gt; &lt;label class=select for=Method&gt;Method&lt;/label&gt;
    &lt;select id="Method" data-iconpos="left" data-icon="grid"&gt;
              &lt;option value = "0"&gt;  &lt;/option&gt;
             &lt;option value = "Meter"&gt;Meter&lt;/option&gt;
             &lt;option value = "Doppler"&gt;Doppler&lt;/option&gt;
             &lt;option value = "Float"&gt;Float&lt;/option&gt;
             &lt;option value = "Gage"&gt;Gage&lt;/option&gt;
             &lt;option value = "VE"&gt;Visual Estimate&lt;/option&gt;
             &lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;/fieldset&gt;
  
                &lt;fieldset&gt;
                  &lt;div class="_100"&gt;
         &lt;div class="_50"&gt;&lt;Label class=select for=FieldForms&gt;Field Forms&lt;/label&gt;
           &lt;select id = "FieldForms" multiple name=FieldForms data-iconpos="left" data-icon="grid"&gt;
             &lt;OPTION&gt;Select all that apply:&lt;/OPTION&gt;
         &lt;option value = "Aquatic Plant Visual Assessment"&gt;Aquatic Plant Visual Assessment&lt;/option&gt;
             &lt;option value = "Photos"&gt;Photos&lt;/option&gt;
             &lt;option value = "Aquatic Plant Tracking Form"&gt;Aquatic Plant Tracking Form&lt;/option&gt;
             &lt;option value = "Rosgen Form"&gt;Rosgen Form&lt;/option&gt;
             &lt;option value = "NRCS Form"&gt;NRCS Form&lt;/option&gt;
             &lt;option value = "EMAP Forms"&gt;EMAP Forms&lt;/option&gt;
             &lt;option value = "Summary Form"&gt;Summary Form&lt;/option&gt;
             &lt;option value = "Channel Cross-Section"&gt;Channel Cross-Section&lt;/option&gt;
             &lt;option value = "Total Discharge"&gt;Total Discharge&lt;/option&gt;
          &lt;/select&gt;&lt;/div&gt;
  &lt;div class="_50"&gt;&lt;Label class=select for=DataLoggers&gt;Data Loggers&lt;/label&gt;
           &lt;select id = "DataLoggers" multiple name=DataLoggers data-iconpos="left" data-icon="grid"&gt;
             &lt;OPTION&gt;Select all that apply:&lt;/OPTION&gt;
             &lt;option value = "Temperature"&gt;Temperature&lt;/option&gt;
             &lt;option value = "YSI"&gt;YSI&lt;/option&gt;
             &lt;option value = "TruTrack"&gt;TruTrack&lt;/option&gt;
             &lt;option value = "AquaRods"&gt;AquaRods&lt;/option&gt;
             &lt;option value = "Weather Station"&gt;Weather Station&lt;/option&gt;
             &lt;option value = "MiniDOT"&gt;MiniDOT&lt;/option&gt;
          &lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
  
     &lt;/fieldset&gt;&lt;/div&gt;
         &lt;div data-role="footer" data-id="SVFnav"&gt;
         &lt;div data-role="navbar"&gt;
         &lt;ul&gt;
         &lt;li&gt;&lt;a href="#chapter1"&gt;&lt;h4&gt;Site Info&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#chapter2"&gt;&lt;h4&gt;Samples&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a class="ui-btn-active ui-state-persist"&gt;&lt;h4&gt;Field&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#chapter4"&gt;&lt;h4&gt;Comments&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#chapter5"&gt;&lt;h4&gt;Lab Info&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
             &lt;/div&gt;&lt;/div&gt;
             &lt;/div&gt;
     &lt;/body&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>Here is the latest script for the button</p>
  
  <pre><code>  &lt;script type="text/javascript" src="printThis.js"&gt;&lt;/script&gt;
   &lt;input type="button" id="printThis" onclick="printThis()" data-icon="gear" data-theme="b" value="Print" /&gt;
   &lt;script&gt;
   $(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});
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>(#Site,#Samples,#Field,#Comments are the page IDs). This prints the form but the only inputs it prints are the selects &amp; radios not the text. I need all of the imputs from the completed form.</p>
  
  <p>I also tried the following</p>
  
  <pre><code> &lt;div data-role="header"&gt;
   &lt;h1&gt;Lab Information&lt;/h1&gt;
    &lt;input type="button" class="ui-btn-right" id="print" onclick="printElement" data-icon="gear" data-theme="b" value="Print" /&gt;
   &lt;/div&gt;&lt;!--/header--&gt;
  
   &lt;script&gt;
   $(document).ready(function() {
   $("#print").click(function(){
  printElement({ printMode: 'popup' });
  });
  function printElem(options){
  $('#SiteVisit').printElement(options);
  }
   });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>(SiteVisit is the id for the form)</p>
  
  <p>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 </p>