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>

在表单中插入后退按钮

1 个答案: