如何保存文本框中的輸入，然后移至下一頁？ （使用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 ，瀏覽器將運行nextButton explanation() ，然后嘗試執行表單的action 。 因為您的操作是action='#'所以它只是嘗試重新加載頁面，從而阻止document.location.href正常工作。

實際上，您可以嘗試不輸入任何內容並單擊按鈕。 重定向將起作用，因為表單為空，因此無需提交任何內容。

Answer 2

@大衛是正確的。 您可以添加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 。