Printing form with jquery printThis -
i pulling hair out trying inputs of form print. have tried printthis, printelement, window.print , every other iteration of print solution , cannot work.
as background- multi-page form using jquery, jqmobile, html5, css3. has multiple types of inputs including multi-selects, radios, text, etc. print of input not need have form layout.
here sample of code, long , intensive put 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:library@gmail.com?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 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°</label> <input type="radio" name="temp" id="radf" value="f"> <label for="radf">f°</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°</label> <input type="radio" name="atemp" id="radaf" value="f"> <label for="radaf">f°</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 = "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 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 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 latest script 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 page ids). prints form inputs prints selects & radios not text. need of imputs completed form.
i tried 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 id form)
i know ain't pretty, i'm work in progress can please tell me going wrong. bosses starting unhappy time taking me figure out
just found answer this, myself.
check page here on stackoverflow:
is there way clone form field values in jquery or javascript?
you need touch values, making them explicit in "value" attribute. need alter printthis plugin directly.
working version 1.3 of printthis plugin, added following lines after line adding header (line 92):
$('input:text').each(function() { $(this).attr('value', $(this).val()); }); then, changed line appends code (when option printcontainer set false), on line #99:
$doc.find("body").append($(this).html()); becomes
$doc.find("body").append($(this).clone(true)); which makes sure data passed contains values.
be sure set printcontainer false in options when call printthis!
this should solve problem. late you, should next person, @ least.
Comments
Post a Comment