JQuery - обнаружение изменений в форме и возврат

Question

Я пытаюсь обнаружить любые изменения, которые пользователь вносит в форму.

1. Если форма изменена, покажите кнопку сохранения
2. Если пользователь вернет форму к оригиналу, спрячьте кнопку сохранения.

Это номер 2, с которым я борюсь, но я подозреваю, что проблема заключается в моем подходе к номеру 1. Кто-нибудь делал это раньше?

Answer 1

Давайте попробуем на этом примере:

HTML

<input id="yourInput" type="text" data-value="hello" value="hello">
<input id="yourButton"type="button" value="Submit" hidden>

Jquery

$('#yourInput').on("change paste keyup", function() {
if($('#yourInput').val() != $('#yourInput').attr("data-value"))
{ $( '#yourButton' ).show(); }
else
{ $( '#yourButton' ).hide(); }
});

Используя этот пример кода , значение по умолчанию для ввода будет "привет". Если вы введете другое значение, и кнопка покажет.
Если вы снова введете значение по умолчанию «привет», кнопка будет скрыта.
Надеюсь, этот пример поможет вам.

Answer 2

Вы можете сохранить данные в каждом элементе формы ввода с помощью атрибутов data-* и при событии input, инициирующем проверку каждого элемента ввода. Например, HTML:

<input type="text" data-value="initial-value" value="initial-value">

JS:

$( 'form' ).on( 'input', ':input', function(e) {
  var $form = $(e.delegateTarget);
  var edited = false;
  $form.find( ':input' ).each( function() {
    var $this = $( this );

    if ( $this.val() === $this.data( 'value' ) ) {
       return;
    }

    $( '#save-btn' ).show();
    edited = true;
    return false;
  } );

  if ( !edited ) {
    $( '#save-btn' ).hide();
  }
} );