Question

我正在用PHP创建一个多页面表单。

我使用JavaScript来允许用户创建新的文本字段。

function add() {
    document.getElementById('wrapper').innerHTML += '<input type="text"><br><br>';
}

由于它是一种多页面形式，因此用户可以选择返回上一页。问题是，一旦重新加载页面，已添加的额外文本字段就会消失。重新加载页面后，如何将它们保留在页面上？我是否需要创建一个cookie来存储添加的表单元素？

Answer 1

我要做的是将它们存储在sessionStorage中，然后将它们带到页面加载状态。

function add() {
    document.getElementById('wrapper').innerHTML += '<input type="text"><br><br>';
    sessionStorage.inputBoxes = document.getElementById('wrapper').innerHTML;
}

window.load = function() {
   if (sessionStorage.inputBoxes) {
      document.getElementById('wrapper').innerHTML = sessionStorage.inputBoxes;
   }
};

我确实编写了一个插件http://github.com/sebringj/jquery.dumbformstate，它保持了表单状态，不是动态控件方面，而是顺便使用会话和本地存储来保持表单输入状态。

Answer 2

使用jQuery，您可以使用

$('selector_area').append('your control tag');

Answer 3

使用Javascript添加元素时，您正在修改文档对象模型（DOM）。无论您对DOM执行什么操作，都会在页面离开后丢弃。因此，当用户返回时，您将不得不重新加载所有更改。你有很多方法可以做到这一点，有些是：

使用HTML5的SessionStorage或LocalStorage，它会持续到用户处置它为止（一种方法是清除所有浏览数据）;
不使用直接使用Javascript，而是使用Form调用PHP脚本，该脚本将更改存储在Session或Cookie中。

按钮按下时动态添加表单元素，页面重新加载后保留

3 个答案: