如何保存文本框中的输入，然后移至下一页？ （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

当您单击nextButton时，浏览器将运行explanation()，然后尝试执行表单的action。因为您的操作是action='#'，所以它只是尝试重新加载页面，从而阻止document.location.href正常工作。

实际上，您可以尝试在框上不输入任何内容，然后单击按钮。重定向将起作用，因为表单为空，因此无需提交任何内容。

Answer 2

@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。