0

我有这样的表格：

<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 和表单验证。如果表单失败，所有变量都将保留在原处，并且我已经完成了一些自定义编码，因此动态字段和值仍然存在。我可以将其中的一部分用于我想做的事情吗？基本上所有东西都已经准备好进行表单验证了。现在这必须在返回时使用......

4

2 回答 2

0

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

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

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

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

但是，如果您卸载文档，这不会解决您的问题。并使用“返回”按钮重新加载它。唯一能拯救你的是cookies和本地存储。

于 2013-05-10T14:05:59.257 回答
0

在搜索并尝试了一段时间后，我为此使用了 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/

于 2013-05-13T17:20:07.827 回答