Sử dụng jQuery, làm thế nào tôi có thể tìm thấy nếu một biểu mẫu đã thay đổi?

Question

Tôi muốn biết liệu một biểu mẫu đã thay đổi chưa. Biểu mẫu có thể chứa bất kỳ phần tử biểu mẫu nào, chẳng hạn như đầu vào, chọn, văn bản v.v ... Về cơ bản, tôi muốn có cách hiển thị cho người dùng mà họ chưa lưu thay đổi được thực hiện cho biểu mẫu.

Tôi làm cách nào để thực hiện việc này bằng jQuery?

Để làm rõ: Tôi muốn bắt BẤT CỨ thay đổi về hình thức, không chỉ đến các yếu tố đầu vào nhưng cho tất cả các yếu tố hình thức khác là tốt, textarea, chọn, vv

Answer 1

Cách tiếp cận tôi thường lấy trong ví dụ một trường hợp là tôi kiểm tra giá trị biểu mẫu được tuần tự hóa. Vì vậy, ý tưởng là bạn tính toán trạng thái biểu mẫu ban đầu với phương thức $.fn.serialize. Sau đó, khi cần bạn chỉ cần so sánh trạng thái hiện tại với chuỗi được tuần tự hóa ban đầu.

Để nhắm mục tiêu tất cả các yếu tố đầu vào (chọn, văn bản, hộp kiểm, văn bản đầu vào, v.v.) trong một biểu mẫu bạn có thể sử dụng bộ chọn giả :input.

Ví dụ:

var $form = $('form'), 
 
    origForm = $form.serialize(); 
 

 
$('form :input').on('change input', function() { 
 
    $('.change-message').toggle($form.serialize() !== origForm); 
 
});

.change-message { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="change-message">You have unsaved changes.</div> 
 
    <div> 
 
     <textarea name="description" cols="30" rows="3"></textarea> 
 
    </div> 
 
    <div>Username: <input type="text" name="username" /></div> 
 
    <div> 
 
     Type: 
 
     <select name="type"> 
 
      <option value="1">Option 1</option> 
 
      <option value="2" selected>Option 2</option> 
 
      <option value="3">Option 3</option> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     Status: <input type="checkbox" name="status" value="1" /> 1 
 
     <input type="checkbox" name="status" value="2" /> 2 
 
    </div> 
 
</form>