Как мне узнать, что форма ввода изменилась? - PullRequest
Новая
       4

Как мне узнать, что форма ввода изменилась?

14 голосов
/ 30 декабря 2010

У меня есть форма, сгенерированная <% Ajax.BeginForm() {} %>, которая содержит много входных данных и texareas.

Когда изменяется входное значение, мне нужно знать об этом и пометить вход и форму как «грязные». Если пользователь попытается покинуть страницу без сохранения, я попрошу его подтвердить отмену изменений.

Любое предложение о том, как это должно быть сделано?

Ответы [ 5 ]

24 голосов
/ 30 декабря 2010

Элементы управления html включают свойство, которое содержит исходное значение. Вы можете сравнить это значение с текущим значением, чтобы увидеть, были ли какие-либо изменения. 

function getHasChanges() {
    var hasChanges = false;

    $(":input:not(:button):not([type=hidden])").each(function () {
        if ((this.type == "text" || this.type == "textarea" || this.type == "hidden") && this.defaultValue != this.value) {
            hasChanges = true;
            return false;             }
        else {
            if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) {
                hasChanges = true;
                return false;                 }
            else {
                if ((this.type == "select-one" || this.type == "select-multiple")) {
                    for (var x = 0; x < this.length; x++) {
                        if (this.options[x].selected != this.options[x].defaultSelected) {
                            hasChanges = true;
                            return false;
                        }
                    }
                }
            }
        }
    });

    return hasChanges;
}

function acceptChanges() {
    $(":input:not(:button):not([type=hidden])").each(function () {
        if (this.type == "text" || this.type == "textarea" || this.type == "hidden") {
            this.defaultValue = this.value;
        }
        if (this.type == "radio" || this.type == "checkbox") {
            this.defaultChecked = this.checked;
        }
        if (this.type == "select-one" || this.type == "select-multiple") {
            for (var x = 0; x < this.length; x++) {
                this.options[x].defaultSelected = this.options[x].selected
            }
        }
    });
}
19 голосов
/ 30 декабря 2010

Из документов JQuery: 

//This applies to whole form
$('#formID').change(function() {
  alert('Form changed!');
});

И вы можете сделать это, чтобы проверить только входы и уведомить пользователя, если он попытается выйти без сохранения изменений. 

var inputsChanged = false;
$('#formID input').change(function() {
  inputsChanged = true;
});

$(window).unload(function() {
  if (inputsChanged === true) {
    alert('Would you like to save your edits before exiting?'); 
  }    
});

jQuery API .change ()

16 голосов
/ 20 февраля 2016

Воскрешение этого старого вопроса, потому что я подумал о более простом / лучшем способе.Вместо прослушивания событий на различных входах вы можете сериализовать исходные данные формы, сохранить их, а затем снова сериализовать и проверить, изменились ли они, например: 

var originalFormData = $('form#formId').serialize();
function checkFormChanged() {
    if(originalFormData !== $('form#formId').serialize()) {
        //it's dirty!
    }
}

Еще одно дополнительное преимущество заключается в следующем:что если пользователь вносит изменение, а затем возвращает его, эта проверка сообщит, что форма очищена.

8 голосов
/ 30 декабря 2010

Я бы сделал это с помощью jQuery.Это будет что-то вроде этого (просто черновик, вам может понадобиться добавить / изменить некоторый код): 

$(document).ready(function() {  
    $('#formId:input').each(function(key) {
        $(this).change(function() {
            $(this).addClass('dirty');
        });
    });
});

Затем, перед POSTing, проверьте, нет ли грязного ввода.Вы даже можете добавить немного цвета, используя класс грязного CSS.

РЕДАКТИРОВАТЬ: опечатка исправлена ​​«изменено» на «изменить»

1 голос
/ 28 июня 2018

Вы можете использовать jquery плагин dirrty для идентификации грязной формы.

https://github.com/rubentd/dirrty

В событии on ("dirty") задайте для некоторой глобальной переменной значение true, чтобы идентифицировать форму, измененную.

Обработка события window.onbeforeunload или $(window).unload() и получение подтверждения от пользователя на основе значения этой переменной.

Преимущество этого плагина в том, что вы можете отслеживать, если форма снова изменяется на исходные значения, используя событие on ("clean")

...