表单更新“;重置”;按钮以获取新数据

Form - update "reset" button to new data

本文关键字：新数据 获取 数据 按钮 更新 重置 表单      更新时间：2023-09-26

我在我的一个项目中使用了mootools。我正在开发基于可排序的易于定制的菜单。

问题来了，我有一个包含菜单节点信息的表单。每当用户选择不同的节点时，表单都会用JS更新（表单会填充新数据）。问题是"重置"按钮显然"记住"了初始数据，所以每当用户点击它时，它就会加载初始数据表单

每当我加载新数据时，是否有更新"默认"表单状态的方法？（ofc我可以写一段代码，做我需要的任何事情，但如果有一些更简单的解决方案，允许默认的"重置"按钮与新数据一起工作，那么使用它的工作量就会小得多：）

提前感谢的帮助

除了通过ajax获得一个新的数据源并替换innerhtml从而替换表单本身之外，我想不出其他任何事情了。

您可以使用类似toQueryString的东西来序列化表单，然后根据mootools more的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));

这样可以覆盖大多数情况，并且您总是可以保存一个新的默认状态。不过，需要用收音机之类的东西来测试一下。

以下是保存/恢复的基本技巧：http://jsfiddle.net/UWTUJ/1/

相关文件：http://mootools.net/docs/more/Types/String.QueryString（更多）和http://mootools.net/docs/core/Element/Element#Element:toQueryString（核心）

对要保存/恢复的所有表单元素的名称属性的隐含依赖。

我以前创建过更复杂的保存/恢复状态，甚至返回字段CSS类名、验证消息等。

相关文章：