Printing a multipage html form without php

Question

I have a multipage form created using HTML5, jquery & jquery mobile. I cannot use .asp or .php and I want to print all of the data inputted into the form at the end of the form (just the data not the form). Window.print just prints the last page and it is basically an image of that page.

<div data-role="page" id="chapter1">
<div data-role="header">
<h1>Site Information</h1>

</div><!--/header-->

<script>
  $(document).ready(function() {
 $("input[name='ProjectID']").on('change',function(){
 var val = $(this).val();
 var h = $("#chapter1").find("div[data-role='header']").find("h1");
 $(h).html( $(h).html() + " " + val);
});
 })
</script>
<div data-role="content" id="Site">

<fieldset>
<div class="_100">
<div class="_50">
  Project ID:<input type="text" name="ProjectID" id="ProjectID"></div>
   <div class="_50">Project Name:<input type="text" name="ProjectName" id="projectName">
</div></div>
<div class="_100">
<div class="_25"> Date:  <input type="date" name="date">     </div >
 <div class="_25">Time:<input type="time" name="time">     </div>
<div class="_50"><label class=select for=Personnel>Personnel</label>
         <select id = "Personnel" multiple name=Personnel data-iconpos="left" data-icon="grid" data-native-menu="false">
           <OPTION>Select all that apply:</OPTION>
 <option>name1</option>
 <option>name2</option>
 <option>name3</option>

 </select></div>     </div>
 <div class="_100">
 <div class="_50">Waterbody:  <input type="text" name="waterbody"></div>
 <div class="_50">Location:  <input type="text" name="location"></div>
 </div>
    </fieldset>
  <fieldset> 
  <script>
  $(function() {
  $("#lat").mask("99-99999");
  $("#long").mask("-999-99999");
       }
);
</script>
<div id="geolocation"><div class="_100">
<div class="_20"> Latitude: <input type="text" id="lat" name="lat" value=""></div>
 <div class="_20">Longitude: <input type="text" id="long" name="long" value=""></div>
 <div class="_20"><label><input type="text" id="acc" name="accuracy" value="" data-mini="true"></label>
 <button type="button" onclick="getLocationConstant()" value="Get Location" data-mini="true"></button></div>

<script>
function getLocationConstant()
{
if(navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(onGeoSuccess,onGeoError);  
} else {
    alert("Your browser or device doesn't support Geolocation");
}
}

// If we have a successful location update
function onGeoSuccess(event)
{
document.getElementById("lat").value =  event.coords.latitude; 
document.getElementById("long").value = event.coords.longitude;
document.getElementById("height").value = event.coords.altitude;
document.getElementById("acc").value = event.coords.accuracy +"% accuracy";

}

// If something has gone wrong with the geolocation request
function onGeoError(event)
{
alert("Error code " + event.code + ". " + event.message);
}

</script>

        <div class="_10">Elevation: <input type="text" name="height" id="height"></div>
<div class="_10"> <input type="radio" id="radFeet" value="feet" name="Elevation" data-mini="true" />
      <label for="radFeet">ft</label>
      <input type="radio" id="radMeter" value="meter" name="Elevation" data-mini="true"  />
      <label for="radMeter">m</label>
            </div>

        <div class="_20"> <label>Datum</label>
         <select id = "Datum" data-mini="true" data-iconpos="right" data-icon="grid" data-native-menu="false">
     <option value = "NAD83">NAD83</option>
           <option value = "NAD27">NAD27</option>
            <option value = "WGS84">WGS84</option>
        </select> </div> </div></div> 

       </fieldset><br /> </div><!--content-->
      <div data-role="footer" data-id="SVFnav">
       <div data-role="navbar">
       <ul>
       <li><a class="ui-btn-active ui-state-persist"><h4>Site Info</h4></a></li>
        <li><a href="#chapter2"><h4>Samples</h4></a></li>
         <li><a href="#chapter3"><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>

I have attempted using "printThis"

<input type="button" class="ui-btn-right" id="printThis" onclick="printThis" data-icon="gear" data-theme="b" value="Print" />
</div><!--/header-->
 <script>
$(document).ready(function() {
$("#printThis").click(function() {
$('#Site').printThis();
    });
});

But can't get it to render the data, only the page (which I can live with if the data is there too). Any help would be amazingly appreciated!

Answer 1

How about creating a div with a specific id at the end of your document, and then update the value with : jQuery('#yourDivId').val('yourInputsValues'); of the div with your inputs content ?