Как вы обрабатываете изменение формы в jQuery?

Ответ 1

Вы можете сделать это:

$("form :input").change(function() {
  $(this).closest('form').data('changed', true);
});
$('#mybutton').click(function() {
  if($(this).closest('form').data('changed')) {
     //do something
  }
});

Это устанавливает обработчик событий change для входов в форме, если какой-либо из них меняет его, использует .data(), чтобы установить changed значение true, тогда мы просто проверяем это значение на клике, это предполагает, что #mybutton находится внутри формы (если не просто заменить $(this).closest('form') на $('#myForm')), но вы можете сделать это еще больше generic, например:

$('.checkChangedbutton').click(function() {
  if($(this).closest('form').data('changed')) {
     //do something
  }
});

Ссылки: Обновлено

Согласно jQuery, это фильтр для выбора всех элементов управления формой.

http://api.jquery.com/input-selector/

Селектор ввода: в основном выбирает все элементы управления формой.

Ответ 2

Если вы хотите проверить, изменились ли данные формы, поскольку они будут отправлены на сервер, вы можете сериализовать данные формы на загрузке страницы и сравнить ее с текущими данными формы:

$(function() {

    var form_original_data = $("#myform").serialize(); 

    $("#mybutton").click(function() {
        if ($("#myform").serialize() != form_original_data) {
            // Something changed
        }
    });

});

Ответ 3

Реальное и простое решение:

$('form').on('keyup change', 'input, select, textarea', function(){
    console.log('Form changed!');
});

Ответ 4

Вы можете использовать несколько селекторов для присоединения обратного вызова к событию изменения для любого элемента формы.

$("input, select").change(function(){
    // Something changed
});

ИЗМЕНИТЬ

Поскольку вы упомянули, что вам нужно это только для щелчка, вы можете просто изменить мой оригинальный код:

$("input, select").click(function(){
    // A form element was clicked
});

РЕДАКТИРОВАТЬ № 2

Хорошо, вы можете установить глобальное значение, которое устанавливается после того, как что-то изменилось следующим образом:

var FORM_HAS_CHANGED = false;

$('#mybutton').click(function() {
    if (FORM_HAS_CHANGED) {
        // The form has changed
    }
});

$("input, select").change(function(){
    FORM_HAS_CHANGED = true;
});

Ответ 5

Глядя на обновленный вопрос, попробуйте что-нибудь вроде

$('input, textarea, select').each(function(){
    $(this).data("val", $(this).val());
});
$('#button').click(function() {
    $('input, textarea, select').each(function(){
        if($(this).data("val")!==$(this).val()) alert("Things Changed");
    });
});

Для исходного вопроса используйте что-то вроде

$('input').change(function() {
    alert("Things have changed!");
});

Ответ 6

$('form :input').change(function() {
    // Something has changed
});

Ответ 7

Вот элегантное решение.

Существует скрытое свойство для каждого элемента ввода в форме, которую вы можете использовать, чтобы определить, было ли изменено значение. Каждый тип ввода имеет собственное имя свойства. Например

• для text/textarea it defaultValue
• для select it defaultSelect
• для checkbox/radio it defaultChecked

Вот пример.

function bindFormChange($form) {

  function touchButtons() {
    var
      changed_objects = [],
      $observable_buttons = $form.find('input[type="submit"], button[type="submit"], button[data-object="reset-form"]');

    changed_objects = $('input:text, input:checkbox, input:radio, textarea, select', $form).map(function () {
      var
        $input = $(this),
        changed = false;

      if ($input.is('input:text') || $input.is('textarea') ) {
        changed = (($input).prop('defaultValue') != $input.val());
      }
      if (!changed && $input.is('select') ) {
        changed = !$('option:selected', $input).prop('defaultSelected');
      }
      if (!changed && $input.is('input:checkbox') || $input.is('input:radio') ) {
        changed = (($input).prop('defaultChecked') != $input.is(':checked'));
      }
      if (changed) {
        return $input.attr('id');
      }

    }).toArray();

    if (changed_objects.length) {
      $observable_buttons.removeAttr('disabled')   
    } else {
      $observable_buttons.attr('disabled', 'disabled');
    }
  };
  touchButtons();

  $('input, textarea, select', $form).each(function () {
    var $input = $(this);

    $input.on('keyup change', function () {
      touchButtons();
    });
  });

};

Теперь просто создайте формы на странице, и вы должны увидеть, что кнопки отправки отключены по умолчанию, и они будут активированы ТОЛЬКО, если вы действительно измените какое-то входное значение в форме.

$('form').each(function () {
    bindFormChange($(this));
});

Реализация в качестве плагина jQuery находится здесь https://github.com/kulbida/jmodifiable

Ответ 8

Вам нужно плагин jQuery Form Observe. Это то, что вы ищете.

Ответ 9

Расширение ответа Udi, это проверяет только отправку формы, а не на каждое изменение ввода.

$(document).ready( function () {
  var form_data = $('#myform').serialize();
  $('#myform').submit(function () {
      if ( form_data == $(this).serialize() ) {
        alert('no change');
      } else {
        alert('change');
      }
   });
});

Ответ 10

var formStr = JSON.stringify($("#form").serializeArray());
...
function Submit(){
   var newformStr = JSON.stringify($("#form").serializeArray());
   if (formStr != newformStr){
      ...
         formChangedfunct();
      ...
   }
   else {
      ...
         formUnchangedfunct();
      ...
   }
}

Ответ 11

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

    $("form")
    .find("input")
    .change(function(){
        if ($("#hdnFormChanged").val() == "no")
        {
            $("#hdnFormChanged").val("yes");
        }
    });

Когда ваша кнопка нажата, вы можете проверить состояние своего скрытого ввода:

$("#Button").click(function(){
    if($("#hdnFormChanged").val() == "yes")
    {
        // handler code here...
    }
});

Ответ 12

В дополнение к вышеуказанному ответу @JoeD.

Если вы хотите настроить таргетинг на поля в определенной форме (при условии, что существует несколько форм), чем просто поля, вы можете использовать следующий код:

$('form[name="your_form_name"] input, select').click(function(){
    // A form element was clicked
});