0

I am trying to pass data from one page form to another page form. I can't use any server side script. So please help me in doing so. I am pasting my code below.

PAGE 1 CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="number" name="subject" placeholder="Contact No." required />
<input type="text" name="subject" placeholder="Address" required />
<input type="text" name="subject" placeholder="Pin Code" required />
<button id="btnClk">Place your order</button></form>
</body>
</html>

PAGE 2 CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="number" name="subject" placeholder="Contact No." required />
<input type="text" name="subject" placeholder="Address" required />
<input type="text" name="subject" placeholder="Pin Code" required />
</body>
</html>

As you can see 2nd page code is just same as of 1st page and i haven't written anything as i don't know how to dot it. I want that if user fills form on 1st page its detail also gets updated in the form that is on 2nd page and then user will get an option to confirm those details or edit it. Please help me in achieving this result.

Lex
  • 6,758
  • 2
  • 27
  • 42
Mohit Kumar
  • 1
  • 1
  • Possible duplicate of [Share data between html pages](https://stackoverflow.com/questions/11609376/share-data-between-html-pages) – August Apr 20 '18 at 18:26
  • you can pass them as get params in url of 2nd page or can store them in sessionstorage on first page and then retreive them on next page – Nandita Sharma Apr 20 '18 at 18:27

1 Answers1

0

There are different approaches to achieve it -

  1. Save data in sessionStorage (1st page) 

    sessionStorage.setItem('key', 'value');

    Store a JSON data of 1st page DOM elements

    Get saved data from sessionStorage (in 2nd page)

    var data = sessionStorage.getItem('key');

    Or save data in localStorage: 

    localStorage.setItem('key', 'value');
var data = localStorage.getItem('key');

The data stored in localStorage persists until explicitly deleted.

  1. Make 2nd page as popup window

    var opener = window.opener;
if(opener) {
   var oDom = opener.document;
   var elem = oDom.getElementById("your 1st page element");
}

  2. 1st page form data as query string parameters to 2nd page but it's not desirable due to security reason unless you make it tamper proof query string, there is a length limitation for query string.

Sudipta Kumar Maiti
  • 1,669
  • 1
  • 12
  • 18