CODEWITHSUNDEEP
javascriptformsmootoolsreset
Maciej Jaśniaczyk
Maciej Jaśniaczyk

Reputation: 605

Form - update "reset" button to new data

I'm using mootools in 1 of my projects. I'm working on easy to be customised menu based on sortables.

So here's the issue - I've got the form which contains menu node informations. Form is updated with JS whenever user chooses different node (form is populated with new data). Problem is that "reset" button obviously "remembers" the initial data, so whenever user clicks it, it loads initial data form.

Is there anyway to update the "default" form status, whenever i load new data? (ofc i could write piece of code which do whatever i need, but if there is some simplier solution which allows default "reset" button to work with new data would be much less work to use it :))

Thanks in advance for help

Upvotes: 0

Views: 537

Answers (2)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

you can use something like toQueryString to serialize the form and then reverse it based upon the mootools-more's String.parseQueryString():

(function() {

Element.implement({

    saveFormState: function() {
        if (this.get('tag') !== 'form')
            return;
        this.store("defaults", this.toQueryString());
    },

    restoreFormState: function() {
        if (this.get('tag') !== 'form')
            return;
        var vals = this.retrieve("defaults");
        if (!vals.length)
            return;

        var self = this;
        Object.each(vals.parseQueryString(vals), function(value, key) {
            var el = self.getElement("[name=" + key + "]");
            el && el.set('value', value);
        });
    }
});

})();

var f = document.id('f');

// save default
f.saveFormState();

document.getElement("button").addEvent("click", f.restoreFormState.bind(f));

this ough to cover most cases and you can always save a new defaults state. need to test it somewhat with radios and suchlike, though.

here's a basic fiddle with a save/restore: http://jsfiddle.net/UWTUJ/1/

relevant docs: http://mootools.net/docs/more/Types/String.QueryString (more) and http://mootools.net/docs/core/Element/Element#Element:toQueryString (core)

implied reliance on name attributes on all form elements you want to save/restore.

I have previously created more complex save/restore states that even return field CSS class names, validation messages, etc.

Upvotes: 0

kishu27
kishu27

Reputation: 3120

i cant think of anything else except getting a new source through ajax with data prepopulated and replace the innerhtml hence replacing the form itself.

Upvotes: 1

Related Questions