javascript - 我如何保存文本框中的输入然后移至下一页？ (Javascript/HTML)

Question

作为我新工作的一部分，我正在创建一个小表单，用户可以在其中回答问题，然后将其保存并在页面末尾输出。

我开始时有一个提示，要求用户解释他们的答案(效果很好!)，但我被要求将其更改为输入框。

基本上我需要做的过程是:

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比较陌生，所以我将不胜感激!我很清楚周围有类似的问题，但我似乎看不出哪里出了问题。

Answer 1

@David 是对的。您可以添加 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。