Question

我有一个这样的表格：

<form action="" method="POST">
    <input type="text" value="name[]">
    <input type="submit">
</form>
<a href="#" id="add">Add field</a>

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

$('a').click(function()
{
    $('form').append( $('input[type="text"]').clone() );
    return false;
});

这只是一些虚拟代码，但要明确它是一种动态形式。

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

如何轻松处理？

更新

我正在使用CodeIgniter和表单验证。如果表单失败，所有变量将保持原样，并且我已经完成了一些自定义编码，因此动态字段和值仍然存在。我可以将其中某些部分用于我正在尝试做的事情吗？基本上一切都已经存在，用于表单验证。现在，这必须与...一起工作...

Answer 1

提交按钮将对文档发出新请求，并卸载当前文档。保存页面进度的最简单方法是根本不卸载它。您可以找到一个简单的实现here

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

<强>更新我刚刚意识到你也可以使用

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

但是，如果卸载文档，这将无法解决您的问题。然后使用“后退”按钮重新加载它。那么可以拯救你的唯一东西就是cookie和本地存储。

Answer 2

在搜索并尝试了一段时间后，我使用了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');
}

我已经通过在线演示撰写了一篇关于此内容的博文：http://royduineveld.nl/blog/en/tips-trucs/449/waardes-behouden-na-verzenden-van-dynamisch-formulier/

提交后返回动态表单

2 个答案: