0

I have two html pages. First one contains a form with a submit button that navigates to the second page.

The second page basically displays the details entered. How can I display the details entered on the previous page without connecting it to a database?

Page 1 HTML:

<main class="form-signin">
    <form method="get" action="confirmation.html">
      <div class="card">
        <h1>Enter details to book your room</h1>
        <label for="inputName">Enter your full name</label>
        <input type="text" id="inputName" class="form-control" placeholder="Full Name" required autofocus>
        <label for="inputEmail">Enter your email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email Id" required>
        <button class="btn btn-lg btn-primary" type="submit">Book Now</button>
      </div>
    </form>
  </main>

Page 2 HTML :

<div class="card">
    <h1>Your stay has been successfully booked!</h1>
    <div class="details">
      <h5>Booking Details</h5>
      <h3>Name : <span class="name">name</span> </h3>
      <h3>Email Address : <span class="email">email</span></h3>
    </div>
    <button class="btn btn-lg btn-primary" type="submit">Back to home</button>
  </div>

I intend to change the span text on Page 2 with details from Page 1 using javascript

troubled-coder
  • 3
  • 2
  • Does this answer your question? [Sharing a variable between multiple html pages](https://stackoverflow.com/questions/16264253/sharing-a-variable-between-multiple-html-pages) – ikiK Feb 12 '21 at 15:44
  • @Mitya And what about https://www.w3schools.com/html/html5_webstorage.asp HTML Web Storage API – ikiK Feb 12 '21 at 15:46
  • @Mitya well, it is not true that "it is the only way" since, al least, you can use the `localStorage` too. – Emanuele Scarabattoli Feb 12 '21 at 15:48

1 Answers1

0

You either store what you need to store in localStorage and read them in the second page, or pass the params as pathParams and decode the URL in the second page. No need to use cookies, since those will be sent with each one of your requests and it will consume bandwidth you can avoid.

Please refer to this answer about local storage: Storing Objects in HTML5 localStorage

Hassen Ch.
  • 1,693
  • 18
  • 31