javascript - HTML - 保留用户填写的字段并在 "submitted"时显示在下一页上

标签 javascript html

我有一个真正的基本 html 订单,要求提供姓名、地址、信用卡信息、账单/运输信息。这是我的 html 示例。

<fieldset>
	<legend>Personal information:</legend>
	<form>
<label>
  First Name
  <input type="text"><br>
</label>
<label>
  Last Name:
  <input type="text"><br><br/>
</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<b>Billing Address</b>

Street Address:
<input type="text" id="address_1">

(City, State, Zip):
<input type="text" id="address_2"> <br/>

<input type="checkbox" id="toshipping_checkbox">
<em>Check this box if Shipping Address and Billing Address are the same.</em> <br/>
<b>Shipping Address</b>

Street Address:
<input type="text" id="shipping_address_1">

(City, State, Zip):
<input type="text" id="shipping_address_2">

提交此表单后,我希望 results.html 打印出之前填写的字段。

类似这样的事情:

You've entered the following data:
firstname="whatever first name entered"
lastname=
address=

基本上获取所有输入id并将它们作为字符串打印出来。

最佳答案

创建打印脚本

 <script type="text/javascript">


        function PrintDiv() {
            $('document').ready(function () {


                var divContents = document.getElementById("WOcontainer").innerHTML;
                var printWindow = window.open('', '', 'height=800,width=1024');
                printWindow.document.write('<html><head><title>Personal Information</title>');
                printWindow.document.write('</head><body style=" font-family: Arial; font-size: 10px;" >');
                printWindow.document.write(divContents); 
                printWindow.document.write('</body> </html>');
                printWindow.document.close();
                printWindow.print();
            })
        }


    </script>

事件处理程序

<input id="Button1" type="button" value="button" onclick="PrintDiv();" />

关于javascript - HTML - 保留用户填写的字段并在 "submitted"时显示在下一页上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49060202/

相关文章:

html - 如何制作一个div(宽度: auto) adjust to nested divs (float left and fixed width)

html - Bootstrap (3.3.7) 移动导航栏元素(链接)不工作

html 元素 : newline after but do not expand

javascript - 将对象内的数组分隔为单个对象

javascript - 通过 Javascript 功能实时编辑 HTML

javascript - PHP 使用选择值设置变量

javascript - LoDash 可以搜索动态对象数组,但不能搜索类型化对象数组

javascript - 无法在 addEventListener 函数之外获取视频持续时间

javascript - 揭示模块模式中的私有(private)成员

javascript - 处理字符串上的多个条件