如何将表单重置为上次保存（通过 ajax）阶段

Question

我正在使用 jQuery("form")[0].reset(); 在需要时重置表单。此方法将表单重置为初始阶段。这里初始阶段的意思是，"the stage when form was loaded into the page for first time with some values".

但我需要的是将表格重置为上次保存的阶段。

我在做什么： 通过 jQuery.ajax({----}); 保存表单数据而不刷新任何页面。

什么是目标： 使用 ajax 请求保存表单数据后，如果用户更改表单中的任何其他值但不想保存它并选择将表单重置为上次保存的值。如何实现？因为 reset(); 会将表单重置为初始值。

任何帮助将不胜感激。

谢谢

Answer 1

假设您的表单结构如下所示：

<form>
   <input type="hidden" id="recordID" value="">
   // Put your other HTML elements here
   <input type="button" id="save" value="Save">
    <input type="reset" id="reset" value="Reset">
</form>

现在，当您在 success 事件上通过 ajax 保存表单时，添加您刚刚在 #recordID 字段中保存的记录的 id。

现在您必须在单击重置按钮时执行此操作：

$('#reset').click(function(e){
    e.preventDefault();
   if($('#recordID').val() != '') { // if id present then form is in edit mode
        //Do an ajax call by passing id and pull all date and populate in your form fields
   } else {
       //Form is in add mode because no id is present, just reset the form
   }
});

希望对您有所帮助！

Answer 2

感谢你们的回复。

我尝试根据 madalin ivascu 的评论实施解决方案。还找到了一个jsfiddle来做同样的事情。有了一些 modifications/changes 我得到了我需要的东西。

步骤 1： 编写自定义插件：

(function($) {
    $.fn.deserialize = function (serializedString) {
        var form = jQuery(this);
        form[0].reset();
        serializedString = serializedString.replace(/\+/g, "%20");
        var formFieldArray = serializedString.split("&");
        jQuery.each(formFieldArray, function(i, pair) {
            var nameValue = pair.split("=");
            var name = decodeURIComponent(nameValue[0]);
            var value = decodeURIComponent(nameValue[1]);

            var field = form.find("[name='" + name + "']");
            if (field[0] != undefined) {
                if (field[0].type == "radio" || field[0].type == "checkbox") {
                    var fieldWithValue = field.filter('[value="' + value + '"]');
                    var isFound = (fieldWithValue.length > 0);
                    if (!isFound && value == "on") {
                        field.first().prop("checked", true);
                    } else {
                        fieldWithValue.prop("checked", isFound);
                    } 
                } else {
                    field.val(value);
                }
            }
        });
    }
}(jQuery));

步骤 2： 将序列化的表单数据保存在某处。

当您需要将表单重置为上次保存的阶段时，请使用：

yourForm.deserialize(serializedFormData);

如何将表单重置为上次保存（通过 ajax）阶段

How to reset form to last saved(through ajax) stage

forms

ajax

jquery

jqueryform