Как сохранить входные данные из текстового поля, а затем перейти на следующую страницу? (Javascript / HTML)

Question

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

Я начал с приглашения, где пользователям предлагалось объяснить свои ответы (что сработало отлично!), Однако меня попросили изменить это поле ввода.

По сути, мне нужно сделать следующее:

Пользователь вводит в текстовое поле -> Нажатие кнопки «Далее» -> сохранить ввод в переменную сеанса и перейти к следующей странице

Пока у меня есть следующий 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, поэтому я буду благодарен! Я хорошо знаю, что вокруг есть подобные вопросы, я просто не могу понять, где я иду не так.

Answer 1

@ Дэвид прав. Вы можете добавить функцию 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.

Answer 2

Когда вы нажимаете nextButton, браузер запускает explanation() и затем пытается выполнить action вашей формы. Поскольку ваше действие action='#', просто попробуйте перезагрузить страницу, чтобы document.location.href не работал должным образом.

На самом деле, вы можете попытаться ничего не вводить в поле и нажать на кнопку. Перенаправление будет работать, потому что форма пуста, поэтому отправлять нечего.