Làm thế nào để bạn xử lý một thay đổi biểu mẫu trong jQuery?

Trong jQuery, có cách đơn giản nào để kiểm tra xem BẤT KỲ phần tử nào của biểu mẫu đã thay đổi không?

CHỈNH SỬA: Tôi lẽ ra phải nói thêm rằng tôi chỉ cần kiểm tra một click()sự kiện.

CHỈNH SỬA: Xin lỗi, tôi thực sự nên cụ thể hơn! Giả sử tôi có một biểu mẫu và tôi có một nút với nội dung sau:

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

Làm cách nào để kiểm tra xem biểu mẫu đã thay đổi kể từ khi nó được tải hay chưa?

Bạn có thể làm được việc này:

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

Giàn khoan này change trình xử lý sự kiện đối với các đầu vào trong biểu mẫu, nếu bất kỳ người nào trong số họ thay đổi, nó sẽ sử dụng .data()để đặt changedgiá trị thành true, khi đó chúng tôi chỉ kiểm tra giá trị đó khi nhấp chuột, điều này giả định rằng nó #mybuttonnằm bên trong biểu mẫu (nếu không chỉ thay thế $(this).closest('form')bằng $('#myForm')), nhưng bạn có thể làm cho nó chung chung hơn, như thế này:

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

Người giới thiệu: Đã cập nhật

Theo jQuery, đây là một bộ lọc để chọn tất cả các điều khiển biểu mẫu.

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

Bộ chọn đầu vào: về cơ bản chọn tất cả các điều khiển biểu mẫu.

Nếu bạn muốn kiểm tra xem dữ liệu biểu mẫu sẽ được gửi đến máy chủ có thay đổi hay không, bạn có thể tuần tự hóa dữ liệu biểu mẫu khi tải trang và so sánh với dữ liệu biểu mẫu hiện tại:

$(function() {

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

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

});

Một thời gian thực và giải pháp đơn giản:

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

Bạn có thể sử dụng nhiều bộ chọn để đính kèm một lệnh gọi lại sự kiện thay đổi cho bất kỳ phần tử biểu mẫu nào.

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

BIÊN TẬP

Vì bạn đã đề cập rằng bạn chỉ cần cái này cho một cú nhấp chuột, bạn chỉ cần sửa đổi mã gốc của tôi thành cái này:

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

CHỈNH SỬA # 2

Được rồi, bạn có thể đặt một toàn cầu được đặt sau khi một cái gì đó đã được thay đổi như sau:

var FORM_HAS_CHANGED = false;

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

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

Nhìn vào câu hỏi cập nhật, hãy thử một cái gì đó như

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

Đối với câu hỏi ban đầu, hãy sử dụng một cái gì đó như

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

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

Đây là một giải pháp thanh lịch.

Có thuộc tính ẩn cho mỗi phần tử đầu vào trên biểu mẫu mà bạn có thể sử dụng để xác định xem giá trị có bị thay đổi hay không. Mỗi loại đầu vào có tên thuộc tính riêng. Ví dụ

• cho text/textareanó là defaultValue
• vì selectnó mặc định Chọn
• cho checkbox/radionó defaultChecked

Đây là ví dụ.

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();
    });
  });

};

Bây giờ chỉ cần lặp qua các biểu mẫu trên trang và bạn sẽ thấy các nút gửi bị tắt theo mặc định và chúng sẽ CHỈ được kích hoạt nếu bạn thực sự thay đổi một số giá trị đầu vào trên biểu mẫu.

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

Triển khai dưới dạng jQueryplugin tại đây 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();
      ...
   }
}

Bạn cần plugin jQuery Form Observer . Đó là những gì bạn đang tìm kiếm.

Mở rộng câu trả lời của Udi, điều này chỉ kiểm tra khi gửi biểu mẫu, không kiểm tra mọi thay đổi đầu vào.

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

Đầu tiên, tôi muốn thêm một đầu vào ẩn vào biểu mẫu của bạn để theo dõi trạng thái của biểu mẫu. Sau đó, tôi sẽ sử dụng đoạn mã jQuery này để đặt giá trị của đầu vào ẩn khi một thứ gì đó trên biểu mẫu thay đổi:

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

Khi nút của bạn được nhấp, bạn có thể kiểm tra trạng thái của đầu vào ẩn của mình:

$("#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>

Ngoài câu trả lời của @ JoeD ở trên.

Nếu bạn muốn nhắm mục tiêu các trường trong một biểu mẫu cụ thể (giả sử có nhiều hơn một biểu mẫu) thay vì chỉ các trường, bạn có thể sử dụng mã sau:

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

Thử đi:

<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>