Как сохранить ввод из текстового поля, а затем перейти на следующую страницу? (Javascript / HTML)
В рамках моей новой работы я создаю небольшую форму, в которой пользователи отвечают на вопрос, а затем они сохраняются и выводятся в конце страниц.
Я начал с приглашения, в котором пользователей просили объяснить свои ответы (что отлично сработало!), Однако меня попросили изменить это на поле ввода.
По сути, процесс, который мне нужно сделать, это:
User enters in text box -> Clicks next button -> save input to session variable and move to next page
Пока у меня в теле есть следующий HTML-код:
<form name = "next" action='#' method=post>
Explanation:<input type = "text" id = "xp" required><br>
<button class = "nextButton" onclick = "return explanation()">Next</button>
</form>
с соответствующим javascript:
function explanation() {
var exp = document.getElementById('xp').value;
sessionStorage.setItem("p1_reason", exp);
alert(exp);
document.location.href = 'page2.html';
}
Пока что результат:
- Текстовое поле очищается, но ничего не сохраняется и не отображается на экране.
- Следующая страница не отображается.
Любая помощь / совет будут оценены. Я относительно новичок в js, поэтому буду благодарен! Я прекрасно понимаю, что вокруг есть похожие вопросы, я просто не понимаю, в чем я ошибаюсь.
Вы говорите, что на экране ничего не отображается, вы имеете в виду, что alert тоже не отображается? Кроме того, вы не показываете код, считываемый с sessionStorage.
У вас есть два варианта: вернуть false в вашей функции или указать action = 'page2.html'
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Когда вы нажимаете nextButton, браузер запускает explanation(), а затем пытается выполнить action вашей формы. Поскольку ваше действие - action='#', оно просто пытается перезагрузить страницу, не позволяя document.location.href работать должным образом.
На самом деле, вы можете попробовать ничего не вводить в поле и нажимать на кнопку. Перенаправление будет работать, потому что форма пуста, поэтому отправлять нечего.
@ Дэвид прав. Вы можете добавить функцию event.preventDefault(), чтобы предотвратить поведение формы по умолчанию - отправку. В противном случае кажется, что ваш код работает.
function explanation() {
event.preventDefault(); // <-- add here
var exp = document.getElementById('xp').value;
sessionStorage.setItem("p1_reason", exp);
alert(exp);
window.location.href = 'page2.html';
}
Также не используйте document.location.href, он устарел. Лучше использовать window.location.href.
@ Дэвид: Спасибо. Если честно, я не был уверен, пришлось использовать гугл.
Спасибо за быстрый ответ, это сработало отлично.
вы хотите, чтобы значение xp отображалось на странице 2?