Странная форма JQuery представить

Question

Существует div (форма), который открывается по нажатию кнопки.В этой форме есть определенные элементы управления, такие как временные поля, дата, текстовые поля.Когда форма открывается, она предварительно загружена данными.Также здесь есть кнопка отправки (Применить изменения) для формы.

Если я просто нажму на кнопку «Применить изменения», не изменяя ничего в форме, никаких действий не произойдет, но если я что-то изменю, например, время, дату или текст, форма будет сохранена.

Как мы можем определить это поведение ??

Извините за неверный перевод языка ...

Моя форма не будет сохранена, если я просто нажму на кнопку "Применить изменения",Нужно ли редактировать один из элементов управления перед сохранением формы в jquery?

Answer 1

Вот грубый способ отслеживания изменений в данных формы:

function dealWithForm(){
  var hasChanged = false,
      $form = $('form');

  $('input, select', $form).on('change', function(){
    hasChanged = true;
  });

  $('form').submit(function(){
    if(hasChanged){
      $form.submit();
      // or post asynchronously with ajax    
      hasChanged = false;
      $.post( // blah blah );
    } else {
      // stop form from submitting.
      return false;    
    }
  });
}

$(document).ready(function(){
  dealWithForm();
});

Answer 2

Вы можете обработать событие change всех элементов управления в форме, установить флаг для элемента <form> при изменении значения элемента управления (например, с помощью data () ) , затем разрешите отправку формы, только если установлен этот флаг:

$("form").on("change", ":input", function() {
    $(this).closest("form").data("someControlHasChanged", true);
}).on("submit", function(e) {
    if (!$(this).data("someControlHasChanged")) {
        e.preventDefault();
    }
});

Answer 3

Непонятно, хотите ли вы автоматически публиковать изменения или хотите публиковать изменения, когда нажимаете «применить изменения».(но если не было внесено никаких изменений, то применения изменений не должны ничего делать.

самый простой способ - объявить старые значения как переменные javascript. добавить обработчик onclick для applyChanges, который сравнивает каждое старое значение с текущим значением формы. если есть изменения, напишите.

Единственная проблема, которую я вижу, это "/", которую нужно экранировать / убежать. Более грязный обходной путь / хак - генерировать невидимые div со старыми значениями.

и сгенерируйте старое поле внутри него, затем ${oldFIeld1}.text(), чтобы получить его. Обратите внимание, это немного хак, возможно, у кого-то есть хитрый подход, чтобы избежать побега / выхода из него.