Question

问题是我在需要时使用jQuery("form")[0].reset();重置表单。此方法将表单重置为其初始阶段。这里的初始阶段意味着，＆＃34;第一次将表单加载到页面中的阶段，带有一些值＆＃34;。

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

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

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

任何帮助都将受到高度赞赏。

谢谢

Answer 1

感谢您的回复。

我尝试根据 madalin ivascu 的评论实施解决方案。还找到jsfiddle来做同样的事情。通过一些修改/改变，我得到了我需要的东西。

第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);

Answer 2

请在下面说明您的表单结构，如下所示：

<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>

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

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

$('#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
   }
});

希望这会对你有帮助！

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

2 个答案: