Як ви обробляєте зміну форми в jQuery?

У jQuery чи існує простий спосіб перевірити, чи змінився БУДЬ-який елемент форми?

EDIT: Я повинен був додати, що мені потрібно лише перевірити click()подію.

РЕДАГУВАТИ: Вибачте, я справді мав бути більш конкретним! Скажімо, у мене є форма, і у мене є кнопка із таким:

$('#mybutton').click(function() {
  // Here is where is need to test
  if(/* FORM has changed */) {
     // Do something
  }
});

Як я можу перевірити, чи змінилася форма після завантаження?

Ви можете зробити це:

$("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')), але ви можете зробити його ще більш загальним, наприклад:

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

Список літератури: оновлено

Відповідно до jQuery це фільтр для вибору всіх елементів керування формою.

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

Селектор: input в основному вибирає всі елементи керування формою.

Якщо ви хочете перевірити, чи змінилися дані форми, оскільки вони будуть надіслані на сервер, ви можете серіалізувати дані форми при завантаженні сторінки та порівняти їх із поточними даними форми:

$(function() {

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

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

});

Просте рішення в режимі реального часу:

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

Ви можете використовувати кілька селекторів, щоб приєднати зворотний виклик до події зміни для будь-якого елемента форми.

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

РЕДАГУВАТИ

Оскільки ви згадали, що це потрібно лише для клацання, ви можете просто змінити мій оригінальний код до цього:

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

EDIT # 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;
});

Переглядаючи оновлене запитання, спробуйте щось на зразок

$('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!");
});

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

Ось елегантне рішення.

Для кожного вхідного елемента форми є прихована властивість, за допомогою якої можна визначити, чи було змінено значення. Кожен тип введення має свою власну назву властивості. Наприклад

• оскільки text/textareaце defaultValue
• для selectце defaultSelect
• оскільки checkbox/radioце за замовчуванням перевірено

Ось приклад.

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

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

Вам потрібен плагін jQuery Form Observe . Це те, що ви шукаєте.

Розширюючи відповідь Уді, це перевіряє лише подання форми, а не кожну зміну вводу.

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

По-перше, я додав би приховану інформацію до вашої форми для відстеження стану форми. Потім я б використовував цей фрагмент jQuery, щоб встановити значення прихованого вводу, коли щось у формі змінюється:

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

Після натискання кнопки ви можете перевірити стан свого прихованого вводу:

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

$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {
  $("#result").html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Form "your_form_name"</h2>
<form name="your_form_name">
  <input type="text" name="one_a" id="one_a" value="AAAAAAAA" />
  <input type="text" name="one_b" id="one_b" value="BBBBBBBB" />
  <input type="text" name="one_c" id="one_c" value="CCCCCCCC" />
  <select name="one_d">
    <option value="111111">111111</option>
    <option value="222222">222222</option>
    <option value="333333">333333</option>
  </select>
</form>
<hr/>
<h2>Form "your_other_form_name"</h2>
<form name="your_other_form_name">
  <input type="text" name="two_a" id="two_a" value="DDDDDDDD" />
  <input type="text" name="two_b" id="two_b" value="EEEEEEEE" />
  <input type="text" name="two_c" id="two_c" value="FFFFFFFF" />
  <input type="text" name="two_d" id="two_d" value="GGGGGGGG" />
  <input type="text" name="two_e" id="two_f" value="HHHHHHHH" />
  <input type="text" name="two_f" id="two_e" value="IIIIIIII" />
  <select name="two_g">
    <option value="444444">444444</option>
    <option value="555555">555555</option>
    <option value="666666">666666</option>
  </select>
</form>
<h2>Result</h2>
<div id="result">
  <h2>Click on a field..</h2>
</div>

На додаток до вище відповіді @ JoeD.

Якщо ви хочете націлити поля в певній формі (припускаючи, що існує більше однієї форми), а не просто поля, ви можете використовувати такий код:

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

Спробуйте це:

<script>
var form_original_data = $("form").serialize(); 
var form_submit=false;
$('[type="submit"]').click(function() {
    form_submit=true;
});
window.onbeforeunload = function() {
    //console.log($("form").submit());
    if ($("form").serialize() != form_original_data && form_submit==false) {
        return "Do you really want to leave without saving?";
    }
};
</script>