jquery - 在没有 php 的情况下打印多页 html 表单

Question

我有一个使用 HTML5、jquery 和 jquery mobile 创建的多页表单。我不能使用 .asp 或 .php，我想在表单末尾打印输入到表单中的所有数据(只是数据而不是表单)。 Window.print 只打印最后一页，它基本上是该页的图像。

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

我尝试过使用“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();
    });
});

但无法让它呈现数据，只能呈现页面(如果数据也存在，我可以接受)。非常感谢任何帮助!

Answer 1

如何在文档末尾创建一个具有特定 id 的 div，然后使用以下代码更新值:jQuery('#yourDivId').val('yourInputsValues') ; 包含您的输入内容的 div ?