There are three web pages. I want to transfer data from my first page and second page to the third page. The first webpage is a simple form. The second webpage consists of Dynamic table. The webpage should print the the other two pages data.

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=".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

The Personal Details are:

There are three web pages. I want to transfer data from my first page and second page to the third page. The first webpage is a simple form. The second webpage consists of Dynamic table. The webpage should print the the other two pages data.

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

The Personal Details are:

• javascript
• jquery
• html

• I tried using session cookies. – Vibhu Dadhichi Commented Nov 12, 2015 at 9:43
• It wasnt accepting the code so had to remove the incorrect code. I am new to stack exchange. Didnt know much how to post questions. sorry. – Vibhu Dadhichi Commented Nov 12, 2015 at 9:44
• But really Viber, you were prompted to go through many screens asking if you understood what you were doing. If you still managed to ask a bad question, then that is entirely on you. You can use cookies (they do work), javascript vars or values in the url. – Mathemats Commented Nov 12, 2015 at 22:47

1 Answer 1

Well, considering you've tagged jQuery and JavaScript and not back-end languages like PHP, ASP.Net, etc., I would suggest using HTML5's Session Storage. Obviously, if a user has disabled JavaScript this will not work.

First of all, you'll need to gather the form data to store:

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

Then, because SessionStorage only accepts string values, we'll need to convert the form data into JSON:

formData = JSON.stringify(formData);

Then we can check if SessionStorage is supported and, if it is, we'll store the form's data for later use:

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

To get the form data out later, you can do this:

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

If you want this to work regardless of whether JavaScript is disabled/enabled, you will need to use a server-side script. However, I don't know what language you're using, as you haven't tagged any server-side languages.

NOTE: Any storage feature you integrate into your front end will be unsafe for storing valuable/personal information. For valuable information, I would suggest posting the sensitive data to your server with SSL and store it properly, hashing valuable values where required.