Как сбросить форму до последней сохраненной (через ajax) стадии

Дело в том, что я использую jQuery("form")[0].reset(); сбросить форму при необходимости. Этот метод сбрасывает форму на начальную стадию. Здесь начальный этап означает "этап, когда форма была загружена на страницу впервые с некоторыми значениями".

Но мне нужно сбросить форму до последней сохраненной стадии.

Что я делаю: сохранение данных формы через jQuery.ajax({----}); без обновления страницы.

Что является целью: после сохранения данных формы с ajax запрос, если пользователь изменяет какие-либо другие значения в форме, но не хочет их сохранять, и выбирает сброс формы к последнему сохраненному значению. Как этого добиться? Так как reset(); сбросит форму к начальным значениям.

Любая помощь будет высоко оценена.

Спасибо

Источник

2 ответа

Решение

Спасибо за ваши ответы, ребята.

Я попытался реализовать решение, основанное на комментарии Мадалина Иваску. Также нашел 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);
Источник

Скажем, под структурой вашей формы что-то вроде ниже:

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

Надеюсь, это поможет вам!

Источник
Другие вопросы по тегам