Data transfer between 2 pages. Other page prefilled

Question

This is the book now button from page 1, product.html

  <form name="booksr1" method="link" action="enquiry.html"><input type="button" value="Book Now" class="book" onclick="window.location.href='enquiry.html'" /></form> 

I'd like to make it where the other page, enquiry.html is prefilled with the subject I want eg RE: Enquiry on: Single Room, when the "Book Now" button on the other page is clicked on

This is the code for the RE: Enquiry input on page 2.

 <label for="RE: Enquiry on:">RE: Enquiry on:<span class="RequiredColor">*</span></label><br/> <input type="text" id="Subject"/><br/><br/> 

How should I do this with localstorage?

PS I'm quite new to this so please make it simple to understand. THANKS!!!

Answer 1

StackOverflow doesn't allow you to save/read from localStorage, so you can't click the buttons to see it work, but let's give this a go. There might be some errors, it's late, but I hope I can explain.

Let's say you have product.html :

 function go() { var room = document.querySelector('#room-select').value; localStorage.setItem('room', room); location.href="enquiry.html"; } 

 <label for="room-select">Choose a Room:</label> <select id="room-select"> <option value="1">Single Room</option> <option value="2">Double Room</option> <option value="3">Triple Room</option> </select> <button onclick="go()">Submit</button> 

You run a function that gets the value of the select box, stores it in localStorage and then goes to your enquiry page.

Now you have to add some script to enquiry.html to read the value back out.

 document.addEventListener('DOMContentLoaded', () => { var room = localStorage.getItem('room'); var input = document.querySelector('#subject'); input.value = room; }); 

 <label for="subject">RE: Enquiry on:</label> <input type="text" id="subject" name="name" required> 

You have to wait for the page to load (listen for the event DOMContentLoaded ), then read the value you stored on the previous page, get a reference to the input box and update its value with the one you read from storage.

Answer 2

****LATEST UPDATE*** I've added and editted the codes Will suggested(Thanks!! :D) into my product.html,

 function room1() { var room = document.querySelector('#room-selector-one').value; localStorage.setItem("booking1", "Single Room(Fan)"); location.href="enquiry.html"; } function room2() { var room = document.querySelector('#room-selector-two').value; localStorage.setItem("booking2","Single Room(AC)"); location.href="enquiry.html"; } 

and my enquiry.html.

 document.addEventListener('DOMContentLoaded', () => { var room = localStorage.getItem('booking1'); var input = document.querySelector('#subject'); input.value = room; }); document.addEventListener('DOMContentLoaded', () => { var room = localStorage.getItem('booking2'); var input = document.querySelector('#subject'); input.value = room; }); 

But now, there's a new problem. I'm able to run the first product value to the enquiry.html page but when after i edited the second product codes, when i try to click back to the button on product.html for the first product, the second value still remains.