将表单数据保存到序列化数组Javascript后重新填充表单答案

【问题标题】：re-populate form, after saving form data to serialized array Javascript将表单数据保存到序列化数组Javascript后重新填充表单
【发布时间】：2016-11-09 22:18:34
【问题描述】：

我正在创建一个希望用户能够编辑的表单。用户将填写表单，保存该表单，用下一个条目填写表单，保存该表单等。每次保存表单时都会创建一个可点击的 div，以便用户可以返回并查看他们的输入以确保他们在最终提交所有表格之前都是正确的。我已经能够这样做保存表单数据：

    var formArray = $('form#popsetForm').serializeArray();

我的问题：当用户单击 div 时，我现在想用 formArray 中的数据填充表单。是否有一个简单的命令可以让我只提供数组作为输入并自动填写表格？下面不是真正的代码，但我希望存在。

    $('form#popsetForm').populate(formArray)

【问题讨论】：

为什么需要重新填写表格？如果用户返回查看该表单，为什么不直接隐藏它并重新显示它？
如果我向你解释我的项目，你真的会给我提供见解吗？我正在构建一个工具，用户将使用它来上传 1-10 个条目。每个条目的形式是相同的。他们会用数据填写表格，点击保存，表格下方会弹出一个小 div 保存了他们的信息。然后表格将重置。他们将用下一个条目再次填充它，保存它，然后创建另一个 div，等等。如果他们想回顾以前的条目以确保它被正确输入，我希望他们能够点击 div然后它将重新填充表单。
这似乎与我解释您原始问题的方式相匹配。我在下面添加了一个答案，应该可以解释简单隐藏表单的方法。

标签： javascript jquery html forms

【解决方案1】：

我不知道是否已经存在解决方案，但这样的解决方案应该适用于 serializeArray。

function restoreForm(form, formArray) {
  formArray.forEach(function (pair) {
    var selector = `input[name="${ pair.name }"], textarea[name="${ pair.name }"]`
    var input = $(form).find(selector)
    input.val(pair.value);
  })
}

https://jsfiddle.net/aycnx0gd/4/

或者像这样的普通ol'formData

function restoreForm(form, formData) {
  for (var key of formData.keys()) {
    var selector = `input[name="${ key }"], textarea[name="${ key }"]`
    var input = $(form).find(selector)
    var newVal = formData.get(key)
    input.val(newVal);
  }
}

https://jsfiddle.net/aycnx0gd/2/

【讨论】：

感谢您的帮助，我最终做了类似的事情。将我的 serializeArray 更改为 Json 并执行以下操作： function repopulate(frm,data){ $.each(data,function(k,v){ $('[name='+k+']',frm).val(v ); }); }

【解决方案2】：

我会考虑简单地从视图中隐藏表单，完全不需要重新填充它。

您的表单提交处理程序可能如下所示：

$('#some_common_parent_element_to_all_forms').on('submit', 'form', function() {

    var $currentForm = $(this);

    // not shown - your form submit logic here

    // on success of form submittal execute following...

    // hide submitted form
    $currentForm.hide();

    // was form submitted previously?
    // if so, we don't want to generate a new form
    if($currentForm.data('submitted') !== true) {

        // clone form
        var $newForm = $currentForm.clone();

        // reset cloned form
        $newForm.get(0).reset();

        // mark submitted form as submitted
        $currentForm.data('submitted', true);


        // append new form to DOM
        $('#some_common_parent_element_to_all_forms').append($newForm).show();

        // create new div to be able to "navigate" to submitted form
        var $formNavContainer = $('#some_element_that_holds_nav_divs');
        var currentNavCount =
            $formNavContainer.find('.form_navigation').length;
        var formDisplayNum = currentNavCount + 1;
        var $newNav =
            $('<div class="form_navigation">Form ' + formDisplayNum + '</div>');
        $newNav.data('target-form-index', currentNavCount);
        $newNav.appendTo($formNavContainer);
    } else {
        // this form was previously submitted
        // perhaps we just reveal most recently created form
        $('#some_common_parent_element_to_all_forms form').last().show();
    }
}

导航 div 的点击处理程序可能如下所示：

$('#some_element_that_holds_nav_divs').on('click', '.form_navigation', function() {
    var $clickedNav = $(this);
    var formIndex = $clickedNav.data('target-form-index');

    var $allForms = $('#some_common_parent_element_to_all_forms form');
    var $selectedForm = $allForms.get(formIndex);

    $allForms.hide();
    $selectedForm.show();
});

这种方法将允许您创建 X 个表单，每个表单都存储自己的一组表单数据。在表单之间“导航”就变成了显示/隐藏单个表单的问题。

【讨论】：