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 e.g. 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?

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

`method="link"` is not valid HTML (just `get`, `post` and `dialog` are valid). See the [official spec](https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-form-method). Also, if you don't submit the `form` you can actually skip it: A `` [is valid](https://stackoverflow.com/a/53221899/5247200) without `
`. — David, Nov 09 '18 at 08:22

score 0 · Answer 1 · answered Nov 09 '18 at 07:37

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.

i've encountered a new problem, can you please help me again? :) — Duncan Chai, Nov 11 '18 at 04:15

Duncan Chai · Answer 2 · 2018-11-10T15:27:04.550

****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.

Looks like we need to clear up a misunderstanding. `product.html` only needs one function. You trigger the function (presumably on a button-click), read the form value and save it to localStorage. You don't need one function per 'answer'. On the `enquiry.html` page, again, you only need one function. It waits for the page to load and reads the previous choice from storage. Does that make sense? — Will, Nov 11 '18 at 17:49
The disconnect might be because I used a `select` drop-down and you might be using buttons? If that's the case, you can use multiple functions (probably better to use a single function with a parameter), but you wouldn't need to do the `querySelector` part because you'd already know which room was selected. — Will, Nov 11 '18 at 17:52

Data transfer between 2 pages. Other page prefilled

2 Answers2