Javascript 提交后返回到动态表单

我有一张这样的表格：

使用Javascript/jQuery，可以添加更多字段，如：

$（'a'）。单击（函数（）
{
$（'form'）.append（$（'input[type=“text”]”）.clone（）；
返回false；
});

这只是一些伪代码，但要明确它是一个动态形式

提交此表单后，我返回（仅使用浏览器中的“后退”按钮），带有值的额外添加字段将消失

如何轻松处理

更新

---

我正在使用CodeIgniter和表单验证。如果表单失败，所有变量都将保持不变，我已经做了一些自定义编码，所以动态字段和值仍然存在。我能用其中的一部分做我想做的事吗？基本上，表单验证的所有内容都已经存在。现在，在返回…

时，必须使用提交按钮对文档发出新请求，卸载当前请求。在页面上保存进度的最简单方法是根本不卸载进度。您可以找到一个简单的实现

您还可以尝试使用cookie或本地存储来存储文档的状态

更新 我刚意识到你也可以用

$("form").bind('submit',function(){
   return false;
});

---

但是，如果卸载文档，这并不能解决问题。然后使用“后退”按钮重新加载。那么，唯一能为您节省的就是cookies和本地存储。

在搜索和尝试了一段时间后，我使用了sessionStorage。在表单提交之前，所有值都将保存在表单中，当用户单击“上一步”按钮时，所有内容都将被设置为“上一步”。例如，在提交之前：

$('form').submit(function()
{
    var array           = {};
    array['name']       = [];
    array['counter']    = 0;

    $('input').each(function()
    {
        array['name'].push( $(this).val() );
        array['counter']++;
    });

    sessionStorage.setItem('input', JSON.stringify(array));
});

装载时：

if(sessionStorage.getItem('input'))
{
    var array = JSON.parse( sessionStorage.getItem('input') );

    for (var n = 0; n < (array['counter'] - 1); ++ n)
    {
        $('form').append( $('input[type="text"]').clone() );
    }

    $('input').each(function(index,value)
    {
        $(this).val( array['name'][index] );
    });

    sessionStorage.removeItem('input');
}

if（sessionStorage.getItem（'input'））
{
var array=JSON.parse（sessionStorage.getItem（'input'）；
对于（变量n=0；n<（数组['counter']-1）；+n）
{
$（'form'）.append（$（'input[type=“text”]”）.clone（）；
}
$（'input'）。每个（函数（索引、值）
{
$（this.val（数组['name'][index]）；
});
sessionStorage.removietem（'input'）；
}

---

我已经写了一篇关于这一点的博客文章，其中有一个在线演示：

@rahulmaindargi，这个问题在这里没有意义…@epascarello为什么不。。这个问题似乎是理论性的。如果有人尝试了一些东西来解决问题，。。如果您希望在使用浏览器中的“后退/前进”按钮时应用程序的状态保持一致，那么提供帮助将比突然提供完整的解决方案更容易。您必须制定一个基于ajax的解决方案，并在不重新加载页面的情况下更改url。如果你不想自己写的话，像AngularJS这样的东西可能会对你有很大帮助。@Roy这是完全正常的，因为客户端的页面生命周期。您需要找到一种在服务器（会话）上持久保存添加字段的数据的方法，并从零开始构建表单。Ajax调用可以帮助实现这一点。或者在html5中，使用本地存储来保持所有客户端。也许有一个简单的技巧，这就是为什么我并没有告诉你们我尝试了什么。遗憾的是没有，所以我必须在会话中存储信息，并使用ajax获取这些信息。或者使用本地存储。。在提交表单之前和按“上一步”按钮之后，在localstorage中存储所有字段，然后用这些值重新创建所有添加的字段。在我的例子中，通过Ajax处理提交不是一个选项。