个人资料是：

Question

有三个网页。我想将数据从第一页和第二页传输到第三页。第一个网页是一个简单的表格。第二个网页由动态表组成。网页应该打印其他两页数据。

vib1.html

 <h1><b>ENTER YOUR PERSONAL DETAILS</b></h1>


 <form name="vibhu"     action="file:///E:/eclipse_workspace/MyFirstWebApp/WebContent/html/vib3.html" method="GET">
<b>Full Name :</b><br><input type="text" name="name"><br>
<b>Age :</b><br><input type="text" name="age"><br>
<b>Gender :</b><br>
Male<input type="radio" name="gender">
Female<input type="radio" name="gender"><br>
<b>Email :</b><br><input type="text" name="email"><br><br>
<input type="submit" value="Next" >


</form>
</body>
</html>

vib2.html

<div>
    <input type="button" value="Add" class="plusbtn" /> <input
        type="button" value="Remove" class="minusbtn" />
</div>

<table width="50%" border="1" cellpadding="1" cellspacing="1"
    class="test">
    <tr>
        <td>Street</td>
        <td>HouseNo</td>
        <td>City</td>
        <td>Country</td>
    </tr>
    <tr>
        <td><input type="text" class="txtbox" value="" /></td>
        <td><input type="text" class="txtbox" value="" /></td>
        <td><input type="text" class="txtbox" value="" /></td>
        <td><input type="text" class="txtbox" value="" /></td>
    </tr>
</table>
<form name="vibhu"
    action="file:///E:/eclipse_workspace/MyFirstWebApp/WebContent/html/vib3.html"
    method="GET">
    <input type="submit" value="Submit">
</form>
<style>
.txtbox {
border: none;
width: 100%;
}

input {
font-size: 17px;
height: 30px;
}

table {
background: none repeat scroll 0 0 #abcdef;
border: 1px solid #000;
}
</style>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>
<script>
    $('.plusbtn')
            .click(
                    function() {
                        $(".test")
                                .append(
                                        '<tr><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>');
                    });
    $('.minusbtn').click(function() {
        if ($(".test tr").length != 2) {
            $(".test tr:last-child").remove();
        } else {
            alert("You cannot delete first row");
        }
    });
</script>
</body>
</html>

vib3.html

个人资料是：

Answer 1

好吧，考虑到你已经标记了jQuery和JavaScript而不是PHP，ASP.Net等后端语言，我建议使用HTML5's Session Storage。显然，如果用户已禁用JavaScript，则无效。

首先，您需要收集表单数据进行存储：

var formData = $('#vibhu').serialize();

然后，因为SessionStorage只接受字符串值，我们需要将表单数据转换为JSON：

formData = JSON.stringify(formData);

然后我们可以检查是否支持SessionStorage，如果是，我们将存储表单的数据供以后使用：

if (window.sessionStorage) {
    sessionStorage.setItem('formData', formData);
}

要稍后获取表单数据，您可以执行以下操作：

if (window.sessionStorage) {
    var myFormData = JSON.parse(sessionStorage.getItem('formData'));
    console.log(myFormData.email);
}

如果您希望此功能无论是否禁用JavaScript，您都需要使用服务器端脚本。但是，我不知道您使用的语言是什么，因为您没有标记任何服务器端语言。

注意：您集成到前端的任何存储功能对于存储有价值/个人信息都是不安全的。对于有价值的信息，我建议使用SSL将敏感数据发布到您的服务器并正确存储，并在需要时散列有价值的值。

保存表单输入数据以在另一页上使用

个人资料是：

1 个答案: