使用后退按钮保留表单数据

Question

有许多类似的问题，但似乎没有一个能帮助到我。

我正在使用Javascript和html开发一个三步流程。

在前两个步骤中，我有2个表单，每个表单都有一个下一步/上一步按钮。我需要能够从第二步返回第一步，并仍然保留第一步的表单数据。我对javascript还很陌生，任何帮助都将不胜感激。我不确定如何保存表单数据，然后在用户从第二步返回时插入它。

编辑： 我决定使用JS来隐藏/显示表单，请问为什么我的变量永远无法达到currentStep == 3; 当回退时会出现问题，因为currentStep值停留在2处。

var currentStep = 1;

function nextStep() {

if (currentStep ===1){
  
        $("#petmain1").hide();
  $("#petmain2").show();
  $("#addproduct").show();
  $("#firstimage").hide();
  $("#secondimage").show();
  currentStep = 2;
  console.log("Current step is " + currentStep);
        
 }else if(currentStep ===2){
  
  $("#petmain2").hide();
  $("#addproduct").hide();
  $("#secondimage").hide();
  $("#petmain3").show();
  $("#thirdimage").show();
  $("#firstimage").hide();
  currentStep === 3;
  console.log("Current step is " + currentStep);
  
 }

}
function prevStep() {
 

if (currentStep ===2){
        $("#petmain1").show();
  $("#petmain2").hide();
  $("#addproduct").hide();
  $("#firstimage").show();
  $("#secondimage").hide();
  currentStep = 1;
  console.log("Current step is " + currentStep);
 }else if(currentStep === 3){
  $("#petmain3").hide();
  $("#thirdimage").hide();
  $("#secondimage").show();
  $("#petmain2").show();
  $("#addproduct").show();
  currentStep === 2;
  console.log("Current step is " + currentStep);
 }

}

- anthonytherockjohnson

---

我认为你应该使用具有多个表单的向导或使用 cookies 存储数据。 - SAUMYA

你应该把所有表单放在同一页中，这样你就可以访问表单的所有值。 - Shrikantha Budya

@ShrikanthBuds是正确的，让表单在同一页上但在屏幕外显示前一步和下一步，当您想要返回时，只需更改margin-left属性即可。 - Velimir Tchatchevsky

最好使用 display: none 隐藏表单。 - jcubic

这里有一个演示给你。这个演示完美地运行着，我在这里找到了这个演示。$(document).ready(function() { var count = 0; // 计算空白字段 /------------ 验证函数-----------------/ $(".submit_btn").click(function(event) { var radio_check = $('.rad'); // 通过类名获取单选按钮 var input_field = $('.text_field'); // 获取所有具有相同类名text_field和HTML标记textarea的输入框 var text_area = $('textarea'); // 验证 - Manjeet Barnala

好的，我已经决定采用这种方法，但是我遇到了一个问题。我应该把代码发布到我的原始问题中吗？ - anthonytherockjohnson

Answer 1

您可以使用localStorage

当从第一步导航到第二步时，可以存储该值

if(typeof(Storage) !== "undefined") {
     localStorage.setItem("someKey", $("#somField").val());
} else {
     //
}

再次从第二步导航到第一步时，请检查本地存储的值并将其分配给第一个表单中的字段。

$("#somField").val(localStorage.getItem("someKey"))

- brk

---

会导致错误......;) 你如何确定哪个值应该放在哪个输入框中？ - Jai

@Jai，你能否详细说明一下？ - brk

Answer 2

你可以使用sessionStorage。 HTML

<form>
  Username : <input type='text' id='name'> <br />
  Password : <input type='password' id='password'> <br />
  <input type='button' onclick='storedata()' value='submit'>
</form>
<p id='res'></p>

JS

window.onload = function() {
  if (sessionStorage.name && sessionStorage.password) {
      document.getElementById("name").value = sessionStorage.name;
      document.getElementById("password").value = sessionStorage.password;
    }
};

function storedata() {
  if(typeof(Storage) !== "undefined") {
    var name = document.getElementById("name").value;
    var password = document.getElementById("password").value;

    sessionStorage.name = name;
    sessionStorage.password = password;

    document.getElementById("res").innerHTML = "Your datas restored";
  } else {
    document.getElementById("res").innerHTML = "Sorry, your browser does not support web storage...";
  }
}

Working Demo : https://jsfiddle.net/d83ohf6L/

- Munawir