如何在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.

Answer 1

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

Answer 2

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");

Answer 3

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.

Answer 4

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/

Answer 5

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