Question

I’m trying to build a web app using Dojo. I have a form that posts data via Dojo’s xhrPost capabilities to a server side program that saves changes made on the form whenever the user hits the “save” button. What I would like to do is disable the save button after a successful save until the next time something is changed in any of the form’s fields to avoid repeated attempts to save an unchanged document.

I tried having Dojo’s event watching functionality watch for changes, but have not been successful. The event intended to trigger reenabling the save button never does anything. Here is what I tried:

eventWatching.push(dojo.connect(dijit.byId('editForm'), 'onChange', function() { dijit.byId('saveButton').set('disabled', false); }));

Using onKeyPress instead of onChange seemed promising, but that did not (obviously) reenable the button when the form was edited using the mouse alone.

Answer 1

Prior to 1.6, I don’t think dijit.form.Form connects its children’s onChange to its own, which is likely why your onChange idea didn’t work.

In Dojo 1.6, what you’re asking for is easily possible by taking advantage of the fact that widgets now inherit dojo.Stateful functionality:

form.watch('value', function(property, oldvalue, newvalue) {
    /* ... */
});

In 1.5 or lower this might take some work; can’t think of an easy way off the top of my head but maybe someone else has an idea or one will hit me later.

You can find the code responsible for hooking up the onChange and value-watching functionality in 1.6 here: https://github.com/dojo/dijit/blob/master/form/_FormMixin.js#L396-429