Передача данных между 2 страницами.Другая страница заполнена - PullRequest
Новая
       15

Передача данных между 2 страницами.Другая страница заполнена

0 голосов
/ 09 ноября 2018

Это кнопка «Забронировать» со страницы 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>

Я бы хотел сделать это там, где другая страница, enquiry.html, заполнена темой, которую я хочу, например. RE: Запрос: Одноместный номер, когда кнопка «Забронировать сейчас» на другой странице нажата на

Это код для RE: ввод запроса на стр. 2. 

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

Как мне это сделать с localalstorage?

P.S. Я довольно новичок в этом, поэтому, пожалуйста, сделайте это простым для понимания. СПАСИБО !!!

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

**** ПОСЛЕДНИЕ ОБНОВЛЕНИЯ *** Я добавил и отредактировал коды, которые предложил Уилл (спасибо !!: D) в мой 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";
}

и мой запрос.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;	   
});

Но теперь появилась новая проблема. Я могу запустить первое значение продукта на странице enquiry.html, но когда после того, как я отредактировал коды второго продукта, когда я пытаюсь вернуться к кнопке в product.html для первого продукта, второе значение остается.

0 голосов
/ 09 ноября 2018

StackOverflow не позволяет вам сохранять / читать из localStorage, поэтому вы не можете нажимать кнопки, чтобы увидеть, как он работает, но давайте попробуем. Там могут быть некоторые ошибки, уже поздно, но я надеюсь, что смогу объяснить.

Допустим, у вас есть 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>

Вы запускаете функцию, которая получает значение поля выбора, сохраняет его в localStorage и затем переходит на страницу запроса.

Теперь вам нужно добавить некоторый скрипт в enquiry.html, чтобы прочитать значение обратно. 

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>

Вам нужно дождаться загрузки страницы (прослушать событие DOMContentLoaded), затем прочитать значение, которое вы сохранили на предыдущей странице, получить ссылку на поле ввода и обновить его на значение, которое вы прочитали с хранение.

...