Friday, January 2, 2009

Prompt User About Unsaved Changes Using Mootools

Mootools has a very useful method toQueryString on the Form element class.  In short, this method takes all the form fields and builds a query string generally used when sending form data to the server.  However, I found another use for this method that I thought I would share.

For our Episodic Video Publishing Web Application we have a number of pages that include a form.  If the user tries to navigate from a form that has unsaved changes then we want to prompt the user that they have unsaved changes and that these changes will be lost if they navigate away.  There are various ways that you can detect if the user has modified the page's form but the easiest I've found is to make use of Form.toQueryString.

First, create a function that stores the form state in a hidden input.

getOrCreateInitialFormState: function(form) {
var formInitialState = null;,
var formInitialState = $('form_initial_state');
if (!formInitialState)
formInitialState = new Element('input', {
id: 'form_initial_state',
type: 'hidden',
value: form.toQueryString()
}).inject(form, 'before');
return formInitialState;
}


So when the page loads record the current form state and hook into the click event for any links on your page and check if the form state has changed.

window.addEvent('domready', function()
{
// Grab the form
var form = $('my_form');

// Store the form state in a hidden input
getOrCreateInitialFormState(form);

// Capture any clicks that would cause the user to navigate away
$$('a').addEvent('click', function(e) {
if (form.toQueryString() != getOrCreateInitialFormState(form) {
e.stop();
var result = confirm('You have unsaved changes.' +
' Are you sure you want to navigate away from this page?');
if (result == true) {
// The user wants to navigate
window.location.href = a.get('href');
}
}
});
});


That's it!

3 comments:

  1. Replies
    1. chúng ta cũng không có cách nào tranh đoạt với người của tứ đại Nhân Tộc cùng tứ đại Thú Tộc, các ngươi thấy thế nào.

      Một đạo thanh âm âm lãnh chen miệng nói.

      - Kim lão quái, ngươi cũng tới, ngươi đề nghị không sai, có thể chúng ta cùng nhau tìm được bảo vật thì phân chia như thế nào.

      Một đạo thanh âm sang sảng lớn tiếng nói.

      - Chúngdongtam
      mu moi ra hom nay
      tim phong tro
      http://nhatroso.com/
      nhac san cuc manh
      tổng đài tư vấn luật
      http://dichvu.tuvanphapluattructuyen.com/
      văn phòng luật hà nội
      tổng đài tư vấn luật
      thành lập công ty trọn gói
      http://we-cooking.com/
      chém gió
      trung tâm ngoại ngữ ta đương nhiên là chia đều, đến lúc đó ra khỏi Cực Viêm Chi Địa, dựa theo thực lực mạnh yếu phân phối.

      Thanh âm âm lãnh nói.

      - Như vậy, ta không có vấn đề, nếu không chúng ta cũng không có cách nào tranh cùng đại môn đại tộc, đến lúc đó, cần phải chia đều.

      Nam Tương Tử khẽ nói.

      - Điều này tự nhiên không có vấn đề, chúng ta cứ định như vậy.

      Delete