Question

我已经用Google搜索并搜索了这个独特的问题，但并没有真正找到我的确切解决方案。

我有一个带X个输入的基本表格。在表单的某个时刻，用户可以根据需要通过按钮点击自由添加输入。当他们提交表单时，会转到另一个页面来收集发布的表单数据，但我希望用户能够点击＆＃34;返回＆＃34; （如果提交失败，则以编程方式发回）。

我在通过javascript提交之前有错误检查设置，但还有其他东西（例如PHP邮件程序）可能会失败，我希望他们能够重新提交他们的数据。

当然，问题是当浏览器点击回来时，它 - 最多 - 用输入数据刷新DOM中的初始表单，但是我丢失了所有动态添加的输入。

我想在会话中捕获表单/数据，并让用户在点击后创建的提交版本重新填充DOM。

我最接近的是在SUBMIT上做这样的事情：

var theForm = $('#myForm');
sessionStorage.setItem('formData', JSON.stringify(theForm.clone(true).html().toString());

这是在回发/点击返回：

$('#myForm').replaceWith(JSON.parse(sessionStorage.getItem("formData")));

这里的问题是我的表格，但不是数据！我是否需要迭代每个输入以将我的数据放回到重新创建的表单中？为什么在.clone(true)编辑时没有抓取数据？

Answer 1

这是我最终开始工作的答案。

在表单验证后，我将会话设置为保存表单数据，如下所示：

    var theForm = $('#MyForm');
    sessionStorage.setItem('formHTML', JSON.stringify(theForm.clone(true).html()));

    theForm.find('input,select,textarea').each(function(){
        sessionStorage.setItem(this.name,this.value);
    });

然后，当DOM再次加载时，我会检查会话并使用数据填充表单（如果存在）：

  $(document).ready(function(){

        if (sessionStorage.getItem("formHTML")) {
            $('#MyForm').html($.parseJSON(sessionStorage.getItem("formHTML")));
        }

        $('#MyForm').find('input,select,textarea').each(function(i,elem){
            var sessItem = elem.name, sessValue = '';
            if (sessValue = sessionStorage.getItem(sessItem)) {
                if(elem.type=='radio' && elem.value==sessValue){
                    alert(elem[i].type+' has value of "'+elem[i].value+'"');
                    $('[name='+sessItem+']')[i].prop('checked',true);
                }
                else if(elem.type=='textarea'){
                    alert(elem.type);
                    $('[name='+sessItem+']').val(sessValue);
                }
                else
                {
                    $('[name='+sessItem+']').val(sessValue);
                }
            }

        });
    });

jQuery：使用值存储动态表单并在后退按钮上重新加载

1 个答案: