How to pass data from one page to another page in html?

Question

I have a requirement where I need to pass form data from one HTML page to another HTML page. There are 5 pages in total. The user enters data in the following order:

1st page: Name

2nd page: Weight

3rd page: Height

4th page: Country of birth

5th page: Show all the data entered and also send it to the database as ajax request.

I know I can take user data in one form and multiple pages are not needed, but this requirement is unique to my project and it has to be the way mentioned above. I have tried passing data as URL parameters but after the first page, the variable gets overwritten with the second page's variable. Please Help I am new in HTML and js.

Declare a global JavaScript variable inside your IIFE(Immediately Invoked Function Expression) and store all your input variables in a particular element when navigating from one page to another and finally do a ajax call as the global variable as input to the ajax call. IIFE global variable is suggested because polluting global variable is not a recommended way of declaring a variable in global window scope.. — HulkSapien, Jan 30 '20 at 07:09
"I have tried passing data as url paramaters but after the first page the variable get overwritten with second page's variable." Don't "overwrite" the parameters in the url on the 2nd page, instead add the parameter from the first page and the paramter from the 2nd page. Url to go to page 2: `http://example.com/page2.html?page1var=Jack MeHoff`. Url to go to page 3: `http://exmaple.com/page3?page1var=Jack Mehoff&page2var=Hugh Jass`. Get it? — gforce301, Jan 30 '20 at 07:13
@HulkSapien This looks good. "store all your input variables in a particular element", do you mean storing variable in an object?? Can you elaborate. Thanks. — Zeeshan, Jan 30 '20 at 07:22
I would have been happy to help you with your code but you didn't think we needed to see your code. You said "I have tried passing data as url paramaters but after the first page the variable get overwritten with second page's variable." So, without any code to look at, I naturally assumed that you already know how to make the link with a parameter in it to the next page of your multi page html form. Since you already know that, you should understand how to just keep adding parameters so I just showed you that part. If this is not the case, then why did you say you already tried it? — gforce301, Jan 30 '20 at 07:22
@Tuckbros. No. Can it be used for the requirement mentioned above? I think cookies gets loaded with every request — Zeeshan, Jan 30 '20 at 07:24
i guess you can use it at your convenience with simple javascript to read/write/update values at page loading. https://www.w3schools.com/js/js_cookies.asp — Tuckbros, Jan 30 '20 at 07:41
you have to find where to store your data and make sure it survives page changing. for only client side storage i can think of : cookies, localstorage, sessionstorage or even the url. i guess you are using the url. to make your data "persistent" you have to explicitly reuse it to build the query to the next page. you can find ideas here https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — Tuckbros, Jan 30 '20 at 08:10

PrakashT · Accepted Answer · 2020-01-30T07:25:25.143

Both sessionStorage and localstorage will be work. You can choose anyone of this as per your requirement

sessionStorage, Example:

  sessionStorage.setItem('name', 'my name');
  let data = sessionStorage.getItem('name');
  sessionStorage.removeItem('name');
  sessionStorage.clear();

localStorage: Example :

       save data: localStorage.setItem('Name', 'My name');
       get data : localStorage.getItem('Name');
       remove data from local : localStorage.removeItem('Name');

I hope this will hellpful for you

score 0 · Answer 2 · answered Jan 30 '20 at 07:19

Do you have code available to show? As it stands this might not be an answerable question. However, generally you can store the value from one page in an <input type="hidden"> html tag and use that value in the next call. Finally, you can make an ajax request via XMLHttpRequest() in your js, but you'll need a backend script like PHP or Python to handle the communication with the database. Here's an example that I might try, assuming that you sent form data to the hypothetical page below:

<form action="height.html" method="GET">
    <input hidden="text" name="valuetopass" />
    <input type="submit" value="Submit" />
</form>

Then you can add javascript like this:

var data = window.location.search; // You have parse after this point

data will now contain a string containing your url appended with the value from the previous form, and you'll need to parse it to get just the value, which you can then use to set your next hidden input value with a call to document.getElementsByName("valuetopasss");

score 0 · Answer 3 · edited Jan 30 '20 at 08:26

0

HTML it stateless by nature, meaning every file access to a page is a new world. To pass data, you could encode the data in the URL or you need a backend that stores the data between the pages.

Alternative approach is some browser session storage. If you are talking about a single page application, you can use JavaScript with an object holding the information.

edited Jan 30 '20 at 08:26

Cody Gray - on strike

239,200
50
490
574

answered Jan 30 '20 at 07:20

Oliver P.

46
4

score 0 · Answer 4 · answered Jan 30 '20 at 07:23

you can have a look at this answer

is describes how to use either session storage or local storage or URL params

but I really recommend u to use one form and to build something like a wizard form like this links

https://bootsnipp.com/snippets/eN4qy

https://www.w3schools.com/howto/howto_js_form_steps.asp

https://colorlib.com/wp/free-bootstrap-wizards/

score 0 · Answer 5 · answered Jan 30 '20 at 07:34

You need to use session Storage. Store your variables in session storage like this.

this is your html...

<input type="text" id="name" >
<button onClick="SaveAndGo()">Next Page</button>

in your js use this code

<script>
function SaveAndGo()
{
var name = document.egtElementById('name').value;
 sessionStorage.setItem("name",name); //the second name is the variable name...    

}
</script>

use same code for all other attributes of user like weight, height and country

How to pass data from one page to another page in html?

5 Answers5