在表单中插入后退按钮

Question

我觉得这很简单，但我不确定从哪里开始。

我有一个多页表单，用户单击“下一页”即可进入下一页。 我也想给他们一个“返回”按钮，以便他们可以返回并根据需要更改响应。 如何插入一个“后退”按钮，仍将其数据保留在前一页上？

我不需要跟踪他们之前的反应或类似的反应，仅需最终反应即可。

我的表单有很多代码，因此如果您需要查看其他示例，请告诉我：

表格一开始的代码：

    <form action="surveysubmit.php" method="post" enctype="multipart/form-data">

进入“下一页”页面以及需要“后退”按钮的代码：

<input class="submit-next" type="submit" name="submit_second" id="submit_second" value="" />

提交最终页面（和整个表单）的代码：

<input class="submit-end" type="submit" name="submit_ninth" id="submit_ninth" value="" />     

Answer 1

如果每次单击“下一步”按钮时，都会将用户重定向到新页面，则可以使用localStorage来存储用户在上一页中输入的值，

为此，请按如下所示在每个页面中编辑“提交”按钮，

<input class="submit-next" onclick="saveValues()" name="submit_second" id="submit_second" value="" />

您的JavaScript代码，

function saveValues(){
    //fetch all the form values
    var name = document.getElementById("inputName").value;

    //Store it in the localStorage
    localStorage.setItem("name", name);

   //Now submit the form
   document.getElementById("myForm").submit();
}

现在，您必须在每个页面上检查它们是否是任何设置的localStorage值，

window.document.onload = function(e){ 
    var name = localStorage.getItem("name");
    document.geteElementById("inputName").value = name;
}

要显示后退按钮，

<button onclick="goBack()">Go Back</button>

<script>
function goBack() {
    window.history.back();
}
</script>