Общий способ определить, редактируется ли html-форма

Question 1

У меня есть HTML-форма с вкладками. При переходе от одной вкладки к другой данные текущей вкладки сохраняются (в БД), даже если в данных нет изменений.

Я хотел бы сделать вызов сохранения только в том случае, если форма редактируется. Форма может содержать любой вид управления. Загрязнение формы необязательно путем ввода текста, но выбор даты в элементе управления календарем также подойдет.

Один из способов добиться этого - отображать форму в режиме только для чтения по умолчанию и иметь кнопку «Изменить», и если пользователь нажимает кнопку редактирования, выполняется вызов БД (еще раз, независимо от того, изменяются ли данные Это лучшее улучшение того, что сейчас существует).

Я хотел бы знать, как написать общую функцию javascript, которая будет проверять, было ли изменено какое-либо значение элемента управления?

Question 2

В чистом javascript это было бы непросто, но jQuery позволяет сделать это очень просто:

$("#myform :input").change(function() {
   $("#myform").data("changed",true);
});

Затем перед сохранением вы можете проверить, было ли оно изменено:

if ($("#myform").data("changed")) {
   // submit the form
}

В приведенном выше примере форма имеет идентификатор, равный «myform».

Если вам это нужно во многих формах, вы можете легко превратить его в плагин:

$.fn.extend({
 trackChanges: function() {
   $(":input",this).change(function() {
      $(this.form).data("changed", true);
   });
 }
 ,
 isChanged: function() { 
   return this.data("changed"); 
 }
});

Тогда вы можете просто сказать:

$("#myform").trackChanges();

и проверьте, не изменилась ли форма:

if ($("#myform").isChanged()) {
   // ...
}

Question 3

На случай, если о JQuery не может быть и речи. Быстрый поиск в Google обнаружил Javascript-реализации хеш-алгоритмов MD5 и SHA1. При желании вы можете объединить все входные данные формы и хешировать их, а затем сохранить это значение в памяти. Когда пользователь готов. Снова объедините все значения и хеш. Сравните 2 хэша. Если они совпадают, пользователь не менял поля формы. Если они разные, значит, что-то было отредактировано, и вам нужно вызвать свой код сохранения.

Question 4

Я не уверен, правильно ли я понял ваш вопрос, но как насчет addEventListener? Если вас не слишком заботит поддержка IE8, все будет в порядке. У меня работает следующий код:

var form = document.getElementById("myForm");

form.addEventListener("input", function () {
    console.log("Form has changed!");
});

Question 5

Другой способ добиться этого - сериализовать форму:

$(function() {
    var $form = $('form');
    var initialState = $form.serialize();
    
    $form.submit(function (e) {
      if (initialState === $form.serialize()) {
        console.log('Form is unchanged!');
      } else {
        console.log('Form has changed!');
      }
      e.preventDefault();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Field 1: <input type="text" name="field_1" value="My value 1"> <br>
Field 2: <input type="text" name="field_2" value="My value 2"> <br>
Check: <input type="checkbox" name="field_3" value="1"><br>
<input type="submit">
</form>

Развернуть фрагмент

Question 6

Вот как я это сделал (без использования jQuery).

В моем случае я хотел, чтобы один конкретный элемент формы не учитывался, потому что это элемент, который запускал проверку, и поэтому всегда будет изменяться. Исключительный элемент называется «отчет_период» и жестко закодирован в функции «hasFormChanged ()».

Для проверки заставьте элемент вызывать функцию «changeReportingPeriod ()», которую вы, вероятно, захотите назвать как-нибудь иначе.

ВАЖНО: вы должны вызвать setInitialValues (), когда значениям были присвоены исходные значения (обычно при загрузке страницы, но не в моем случае).

ПРИМЕЧАНИЕ. Я не утверждаю, что это элегантное решение, на самом деле я не верю в элегантные решения JavaScript. Я лично делаю упор в JavaScript на удобочитаемости, а не на структурной элегантности (как будто это было возможно в JavaScript). Я вообще не беспокоюсь о размере файла при написании JavaScript, потому что это то, для чего предназначен gzip, и попытка написать более компактный код JavaScript неизменно приводит к невыносимым проблемам с обслуживанием. Я не приношу извинений, не выражаю сожалений и отказываюсь обсуждать это. Это JavaScript. Извините, мне пришлось прояснить это, чтобы убедить себя, что мне стоит потрудиться над публикацией. Будь счастлив! :)


    var initial_values = new Array();

    // Gets all form elements from the entire document.
    function getAllFormElements() {
        // Return variable.
        var all_form_elements = Array();

        // The form.
        var form_activity_report = document.getElementById('form_activity_report');

        // Different types of form elements.
        var inputs = form_activity_report.getElementsByTagName('input');
        var textareas = form_activity_report.getElementsByTagName('textarea');
        var selects = form_activity_report.getElementsByTagName('select');

        // We do it this way because we want to return an Array, not a NodeList.
        var i;
        for (i = 0; i < inputs.length; i++) {
            all_form_elements.push(inputs[i]);
        }
        for (i = 0; i < textareas.length; i++) {
            all_form_elements.push(textareas[i]);
        }
        for (i = 0; i < selects.length; i++) {
            all_form_elements.push(selects[i]);
        }

        return all_form_elements;
    }

    // Sets the initial values of every form element.
    function setInitialFormValues() {
        var inputs = getAllFormElements();
        for (var i = 0; i < inputs.length; i++) {
            initial_values.push(inputs[i].value);
        }
    }

    function hasFormChanged() {
        var has_changed = false;
        var elements = getAllFormElements();

        for (var i = 0; i < elements.length; i++) {
            if (elements[i].id != 'reporting_period' && elements[i].value != initial_values[i]) {
                has_changed = true;
                break;
            }
        }

        return has_changed;
    }

    function changeReportingPeriod() {
        alert(hasFormChanged());
    }

Question 7

Изменения формы можно легко обнаружить в собственном JavaScript без jQuery:

function initChangeDetection(form) {
  Array.from(form).forEach(el => el.dataset.origValue = el.value);
}
function formHasChanges(form) {
  return Array.from(form).some(el => 'origValue' in el.dataset && el.dataset.origValue !== el.value);
}

initChangeDetection()можно безопасно вызывать несколько раз в течение жизненного цикла вашей страницы: см. Тест на JSBin

Для старых браузеров, которые не поддерживают новые функции стрелок / массивов:

function initChangeDetection(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    el.dataset.origValue = el.value;
  }
}
function formHasChanges(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    if ('origValue' in el.dataset && el.dataset.origValue !== el.value) {
      return true;
    }
  }
  return false;
}

Question 8

Вот демонстрация метода полифилла в собственном JavaScript, который использует FormData()API для обнаружения созданных, обновленных и удаленных записей формы. Вы можете проверить, было ли что-то изменено, HTMLFormElement#isChangedи получить объект, содержащий отличия от формы сброса, используя HTMLFormElement#changes(при условии, что они не замаскированы именем ввода):

Object.defineProperties(HTMLFormElement.prototype, {
  isChanged: {
    configurable: true,
    get: function isChanged () {
      'use strict'

      var thisData = new FormData(this)
      var that = this.cloneNode(true)

      // avoid masking: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
      HTMLFormElement.prototype.reset.call(that)

      var thatData = new FormData(that)

      const theseKeys = Array.from(thisData.keys())
      const thoseKeys = Array.from(thatData.keys())

      if (theseKeys.length !== thoseKeys.length) {
        return true
      }

      const allKeys = new Set(theseKeys.concat(thoseKeys))

      function unequal (value, index) {
        return value !== this[index]
      }

      for (const key of theseKeys) {
        const theseValues = thisData.getAll(key)
        const thoseValues = thatData.getAll(key)

        if (theseValues.length !== thoseValues.length) {
          return true
        }

        if (theseValues.some(unequal, thoseValues)) {
          return true
        }
      }

      return false
    }
  },
  changes: {
    configurable: true,
    get: function changes () {
      'use strict'

      var thisData = new FormData(this)
      var that = this.cloneNode(true)

      // avoid masking: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
      HTMLFormElement.prototype.reset.call(that)

      var thatData = new FormData(that)

      const theseKeys = Array.from(thisData.keys())
      const thoseKeys = Array.from(thatData.keys())

      const created = new FormData()
      const deleted = new FormData()
      const updated = new FormData()

      const allKeys = new Set(theseKeys.concat(thoseKeys))

      function unequal (value, index) {
        return value !== this[index]
      }

      for (const key of allKeys) {
        const theseValues = thisData.getAll(key)
        const thoseValues = thatData.getAll(key)

        const createdValues = theseValues.slice(thoseValues.length)
        const deletedValues = thoseValues.slice(theseValues.length)

        const minLength = Math.min(theseValues.length, thoseValues.length)

        const updatedValues = theseValues.slice(0, minLength).filter(unequal, thoseValues)

        function append (value) {
          this.append(key, value)
        }

        createdValues.forEach(append, created)
        deletedValues.forEach(append, deleted)
        updatedValues.forEach(append, updated)
      }

      return {
        created: Array.from(created),
        deleted: Array.from(deleted),
        updated: Array.from(updated)
      }
    }
  }
})

document.querySelector('[value="Check"]').addEventListener('click', function () {
  if (this.form.isChanged) {
    console.log(this.form.changes)
  } else {
    console.log('unchanged')
  }
})

<form>
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1" />
  </div>

  <div>
    <h4>Radio Button Choice</h4>

    <label for="radio-choice-1">Choice 1</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
  </div>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>

  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>

  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" id="checkbox" />
  </div>

  <div>
    <input type="button" value="Check" />
  </div>
</form>

Развернуть фрагмент

Answer 1

У меня есть HTML-форма с вкладками. При переходе от одной вкладки к другой данные текущей вкладки сохраняются (в БД), даже если в данных нет изменений.

Я хотел бы сделать вызов сохранения только в том случае, если форма редактируется. Форма может содержать любой вид управления. Загрязнение формы необязательно путем ввода текста, но выбор даты в элементе управления календарем также подойдет.

Один из способов добиться этого - отображать форму в режиме только для чтения по умолчанию и иметь кнопку «Изменить», и если пользователь нажимает кнопку редактирования, выполняется вызов БД (еще раз, независимо от того, изменяются ли данные Это лучшее улучшение того, что сейчас существует).

Я хотел бы знать, как написать общую функцию javascript, которая будет проверять, было ли изменено какое-либо значение элемента управления?

Answer 2

Интересное решение было опубликовано Craig баклер на SitePoint. Особый интерес представляет то, что решение не полагается на jQuery и совместимо с несколькими браузерами.

MagicAndi

Answer 3

В чистом javascript это было бы непросто, но jQuery позволяет сделать это очень просто:

$("#myform :input").change(function() {
   $("#myform").data("changed",true);
});

Затем перед сохранением вы можете проверить, было ли оно изменено:

if ($("#myform").data("changed")) {
   // submit the form
}

В приведенном выше примере форма имеет идентификатор, равный «myform».

Если вам это нужно во многих формах, вы можете легко превратить его в плагин:

$.fn.extend({
 trackChanges: function() {
   $(":input",this).change(function() {
      $(this.form).data("changed", true);
   });
 }
 ,
 isChanged: function() { 
   return this.data("changed"); 
 }
});

Тогда вы можете просто сказать:

$("#myform").trackChanges();

и проверьте, не изменилась ли форма:

if ($("#myform").isChanged()) {
   // ...
}

Answer 4

13

Это красиво и просто. Однако, если пользователь изменяет ввод формы, а затем отменяет изменение (например, дважды щелкнув флажок), форма будет считаться измененной. Приемлемо это или нет, конечно, зависит от контекста. Альтернативный см stackoverflow.com/questions/10311663/...

JLH

Answer 5

1

для живых входов нужны некоторые изменения

trackChanges: function () {         $(document).on('change', $(this).find(':input'), function (e) {             var el = $(e.target);             $(el).closest('form').data("changed", true);         });

Dimmduh

Answer 6

36

На случай, если о JQuery не может быть и речи. Быстрый поиск в Google обнаружил Javascript-реализации хеш-алгоритмов MD5 и SHA1. При желании вы можете объединить все входные данные формы и хешировать их, а затем сохранить это значение в памяти. Когда пользователь готов. Снова объедините все значения и хеш. Сравните 2 хэша. Если они совпадают, пользователь не менял поля формы. Если они разные, значит, что-то было отредактировано, и вам нужно вызвать свой код сохранения.

Мэтью Вайнс
источник

2

Это то, что я ожидал от этого вопроса: есть ли библиотека?

Hamedz

Разве это не привело бы к тому же результату, если бы вы объединили все поля, но не хэшировали?

ashleedawg

Да, но сами данные могут быть больше, чем хэш.

JRG

Answer 7

2

Это то, что я ожидал от этого вопроса: есть ли библиотека?

Hamedz

Answer 8

Разве это не привело бы к тому же результату, если бы вы объединили все поля, но не хэшировали?

ashleedawg

Answer 9

Да, но сами данные могут быть больше, чем хэш.

JRG

Answer 10

Я не уверен, правильно ли я понял ваш вопрос, но как насчет addEventListener? Если вас не слишком заботит поддержка IE8, все будет в порядке. У меня работает следующий код:

var form = document.getElementById("myForm");

form.addEventListener("input", function () {
    console.log("Form has changed!");
});

Answer 11

идеально подходит для моих нужд

Благословение

Answer 12

Другой способ добиться этого - сериализовать форму:

$(function() {
    var $form = $('form');
    var initialState = $form.serialize();
    
    $form.submit(function (e) {
      if (initialState === $form.serialize()) {
        console.log('Form is unchanged!');
      } else {
        console.log('Form has changed!');
      }
      e.preventDefault();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Field 1: <input type="text" name="field_1" value="My value 1"> <br>
Field 2: <input type="text" name="field_2" value="My value 2"> <br>
Check: <input type="checkbox" name="field_3" value="1"><br>
<input type="submit">
</form>

Развернуть фрагмент

Answer 13

Мне нравится, как вы думаете, особенно если вы откажетесь от jQuery и сделаете это с помощью ванильного JavaScript. Я понимаю, что вопрос предполагал, что jQuery был доступен, но нет причин не иметь еще более широко применимого решения, аналогичного этому, с оговорками в комментариях.

ruffin

Answer 14

Вот как я это сделал (без использования jQuery).

В моем случае я хотел, чтобы один конкретный элемент формы не учитывался, потому что это элемент, который запускал проверку, и поэтому всегда будет изменяться. Исключительный элемент называется «отчет_период» и жестко закодирован в функции «hasFormChanged ()».

Для проверки заставьте элемент вызывать функцию «changeReportingPeriod ()», которую вы, вероятно, захотите назвать как-нибудь иначе.

ВАЖНО: вы должны вызвать setInitialValues (), когда значениям были присвоены исходные значения (обычно при загрузке страницы, но не в моем случае).

ПРИМЕЧАНИЕ. Я не утверждаю, что это элегантное решение, на самом деле я не верю в элегантные решения JavaScript. Я лично делаю упор в JavaScript на удобочитаемости, а не на структурной элегантности (как будто это было возможно в JavaScript). Я вообще не беспокоюсь о размере файла при написании JavaScript, потому что это то, для чего предназначен gzip, и попытка написать более компактный код JavaScript неизменно приводит к невыносимым проблемам с обслуживанием. Я не приношу извинений, не выражаю сожалений и отказываюсь обсуждать это. Это JavaScript. Извините, мне пришлось прояснить это, чтобы убедить себя, что мне стоит потрудиться над публикацией. Будь счастлив! :)


    var initial_values = new Array();

    // Gets all form elements from the entire document.
    function getAllFormElements() {
        // Return variable.
        var all_form_elements = Array();

        // The form.
        var form_activity_report = document.getElementById('form_activity_report');

        // Different types of form elements.
        var inputs = form_activity_report.getElementsByTagName('input');
        var textareas = form_activity_report.getElementsByTagName('textarea');
        var selects = form_activity_report.getElementsByTagName('select');

        // We do it this way because we want to return an Array, not a NodeList.
        var i;
        for (i = 0; i < inputs.length; i++) {
            all_form_elements.push(inputs[i]);
        }
        for (i = 0; i < textareas.length; i++) {
            all_form_elements.push(textareas[i]);
        }
        for (i = 0; i < selects.length; i++) {
            all_form_elements.push(selects[i]);
        }

        return all_form_elements;
    }

    // Sets the initial values of every form element.
    function setInitialFormValues() {
        var inputs = getAllFormElements();
        for (var i = 0; i < inputs.length; i++) {
            initial_values.push(inputs[i].value);
        }
    }

    function hasFormChanged() {
        var has_changed = false;
        var elements = getAllFormElements();

        for (var i = 0; i < elements.length; i++) {
            if (elements[i].id != 'reporting_period' && elements[i].value != initial_values[i]) {
                has_changed = true;
                break;
            }
        }

        return has_changed;
    }

    function changeReportingPeriod() {
        alert(hasFormChanged());
    }

Answer 15

Изменения формы можно легко обнаружить в собственном JavaScript без jQuery:

function initChangeDetection(form) {
  Array.from(form).forEach(el => el.dataset.origValue = el.value);
}
function formHasChanges(form) {
  return Array.from(form).some(el => 'origValue' in el.dataset && el.dataset.origValue !== el.value);
}

initChangeDetection()можно безопасно вызывать несколько раз в течение жизненного цикла вашей страницы: см. Тест на JSBin

Для старых браузеров, которые не поддерживают новые функции стрелок / массивов:

function initChangeDetection(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    el.dataset.origValue = el.value;
  }
}
function formHasChanges(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    if ('origValue' in el.dataset && el.dataset.origValue !== el.value) {
      return true;
    }
  }
  return false;
}

Answer 16

всегда возвращает истину для моей формы

Rich Stone

Answer 17

Не могли бы вы опубликовать форму на JSBin или Gist, чтобы мы могли ее увидеть?

AnthumChris

Answer 18

по моей вине я выбрал форму с помощью jquery, а не с помощью JS, как в вашем примере. Это красивое и чистое js-решение без перегрузки сериализации. Спасибо!

Rich Stone

Answer 19

Вот демонстрация метода полифилла в собственном JavaScript, который использует FormData()API для обнаружения созданных, обновленных и удаленных записей формы. Вы можете проверить, было ли что-то изменено, HTMLFormElement#isChangedи получить объект, содержащий отличия от формы сброса, используя HTMLFormElement#changes(при условии, что они не замаскированы именем ввода):

Object.defineProperties(HTMLFormElement.prototype, {
  isChanged: {
    configurable: true,
    get: function isChanged () {
      'use strict'

      var thisData = new FormData(this)
      var that = this.cloneNode(true)

      // avoid masking: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
      HTMLFormElement.prototype.reset.call(that)

      var thatData = new FormData(that)

      const theseKeys = Array.from(thisData.keys())
      const thoseKeys = Array.from(thatData.keys())

      if (theseKeys.length !== thoseKeys.length) {
        return true
      }

      const allKeys = new Set(theseKeys.concat(thoseKeys))

      function unequal (value, index) {
        return value !== this[index]
      }

      for (const key of theseKeys) {
        const theseValues = thisData.getAll(key)
        const thoseValues = thatData.getAll(key)

        if (theseValues.length !== thoseValues.length) {
          return true
        }

        if (theseValues.some(unequal, thoseValues)) {
          return true
        }
      }

      return false
    }
  },
  changes: {
    configurable: true,
    get: function changes () {
      'use strict'

      var thisData = new FormData(this)
      var that = this.cloneNode(true)

      // avoid masking: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
      HTMLFormElement.prototype.reset.call(that)

      var thatData = new FormData(that)

      const theseKeys = Array.from(thisData.keys())
      const thoseKeys = Array.from(thatData.keys())

      const created = new FormData()
      const deleted = new FormData()
      const updated = new FormData()

      const allKeys = new Set(theseKeys.concat(thoseKeys))

      function unequal (value, index) {
        return value !== this[index]
      }

      for (const key of allKeys) {
        const theseValues = thisData.getAll(key)
        const thoseValues = thatData.getAll(key)

        const createdValues = theseValues.slice(thoseValues.length)
        const deletedValues = thoseValues.slice(theseValues.length)

        const minLength = Math.min(theseValues.length, thoseValues.length)

        const updatedValues = theseValues.slice(0, minLength).filter(unequal, thoseValues)

        function append (value) {
          this.append(key, value)
        }

        createdValues.forEach(append, created)
        deletedValues.forEach(append, deleted)
        updatedValues.forEach(append, updated)
      }

      return {
        created: Array.from(created),
        deleted: Array.from(deleted),
        updated: Array.from(updated)
      }
    }
  }
})

document.querySelector('[value="Check"]').addEventListener('click', function () {
  if (this.form.isChanged) {
    console.log(this.form.changes)
  } else {
    console.log('unchanged')
  }
})

<form>
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1" />
  </div>

  <div>
    <h4>Radio Button Choice</h4>

    <label for="radio-choice-1">Choice 1</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
  </div>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>

  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>

  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" id="checkbox" />
  </div>

  <div>
    <input type="button" value="Check" />
  </div>
</form>

Развернуть фрагмент

Общий способ определить, редактируется ли html-форма

Ответы: