保存表单输入数据以在其他页面上使用

Save form input data to use on another page

本文关键字：其他 表单 输入 数据 保存      更新时间：2023-09-26

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

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

个人详细信息如下：

考虑到您已经标记了jQuery和JavaScript，而不是PHP、ASP.Net等后端语言，我建议使用HTML5的会话存储。显然，如果用户禁用了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将敏感数据发布到您的服务器并正确存储，必要时对有价值的值进行散列

相关文章：