Kiểm tra xem các giá trị biểu mẫu web có thay đổi

Question

Tôi có biểu mẫu nhiều bước và người dùng có thể điều hướng đến bất kỳ trang nào để sửa đổi hoặc thêm thông tin. Có một trình đơn hiển thị tiến trình hiện tại, các bước mà người dùng đã hoàn thành và cho phép điều hướng đến bất kỳ bước hoàn thành hoặc đang chờ xử lý nào.

Mặc dù nút lớn "Lưu và tiếp tục" một số người dùng nhấp vào trình đơn này để điều hướng xa hơn. Tôi phải kiểm tra - nếu các giá trị đã thay đổi trong biểu mẫu và yêu cầu: "Lưu thay đổi? Có/Không".

Cách tốt nhất (với mã JavaScript phía máy khách tối thiểu) bạn đề nghị tôi kiểm tra xem các giá trị biểu mẫu có thay đổi không?

Chỉnh sửa một chút sau:

Tôi quên nói rằng hình thức đa bước sử dụng postback giữa các bước.

Answer 1

Các jQuery "Dirty Mẫu" plugin có thể giúp bạn ra ở đây:

http://plugins.jquery.com/project/dirtyform

Answer 2

Các jQuery Form Wizard plugin nên có ích trong trường hợp này.

See Demo Here

Answer 3

Đây không phải là hoàn toàn dễ dàng mà không cần JQuery vì sự kiện onchange cho các hình thức không liên tục được hỗ trợ trên các trình duyệt.

Tôi muốn nói nếu bạn có thể, hãy sử dụng một trong các plugin jQuery được trình bày trong các câu trả lời khác.

Nếu jQuery không tham gia câu hỏi, hãy xem xét thêm một đơn giản onchange='if (this.value != this.defaultValue) dirty_flag = true;' vào từng yếu tố đầu vào. Nếu bạn muốn có cách tiếp cận rõ ràng, hãy thực hiện điều này trong phần <script>:

document.getElementById("formid").onchange = 
function() { if (this.value ....) } 

Answer 4

Vì bạn đã đề cập bạn đang đăng lại giữa các bước, tôi sẽ có một trường ẩn lưu trữ bước tiếp theo là gì. Theo mặc định, đây sẽ là bước tiếp theo của biểu mẫu. Nút "Lưu và Tiếp tục" chỉ gửi biểu mẫu.

Mỗi mục nhập trình đơn sau đó sẽ đặt giá trị của biểu mẫu ẩn này thành bước thích hợp và sau đó nó sẽ gửi biểu mẫu. Một cái gì đó như:

<script type="text/javascript"> 
function goToStep(step) { 
document.getElementById("hiddenFieldID").value = step; 
document.getElementById("formID").submit(); 
} 
</script> 

<ul id="menu"> 
    <li><a href="javascript:goToStep(1);">Step 1</a></li> 
    <li><a href="javascript:goToStep(2);">Step 2</a></li> 
    etc... 
</ul> 

Answer 5

Hãy thử kiểm tra các giá trị biểu mẫu như thế này. Cuộc gọi của initFormChangeCheck() sao chép tất cả các giá trị vào một đối tượng gương và thiết lập các sự kiện mousedown và keydown trên mỗi phần tử biểu mẫu những gì đang gọi thói quen checkChange. Bạn cũng có thể kiểm tra bằng một khoảng thời gian.

var fList = new Object(); 
function initFormChangeCheck() { 
    for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) { 
    el = document.forms[0].elements[fOi]; 
    fList[el.name] = el.value; 
    el.onmousedown = checkChange; 
    el.onkeydown = checkChange; 
    } 
} 
function checkChange() { 
    var changed = false; 
    for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) { 
    el = document.forms[0].elements[fOi]; 
    if (fList[el.name] != el.value) { 
     changed = true; 
    } 
    } 
    document.forms[0].show_invoice.disabled = changed; 
} 

Peter Gotrendy News