代码之家 › 专栏 › 技术社区 › scaney

如何实现一个观察多个字段的js观察者

prototypejs javascript

scaney · 技术社区 · 14 年前

我希望观察多个表单字段中的更改,并使用组合的值回拨到服务器。我要观察的字段是选择框。

我是否通过触发父元素的“onchange”事件来完成此操作?

我用的是原型1.6。

3 回复 | 直到 14 年前

Minimul 14 年前

使用onchange并不总是令人满意,因为它不能很好地捕捉我的经验中的变化。使用此处的定时观察者模式 http://prototypejs.org/api/timedObserver/form-element-observer

garik 14 年前

这只是个主意。将所有控件的容器订阅到任何事件并捕获它们。

控件将生成事件,容器上的处理程序将处理这些事件(它是冒泡过程)

它在jquery中工作,我希望能在prototype中工作

npup 14 年前

我同意在这种情况下,最好将侦听委托给包含元素。因为这是您正在查看的复选框,“更改”或“单击”都可以工作。我在示例中选择“click”事件。

类似的内容可用于在单击表单复选框时使用其中一个复选框的状态进行ajax调用:

<body>

    <form action="/myAction.do" id="theForm">
        <h4>Checkbox submission</h4>
        <input type="checkbox" name="cb0" id="cb0" /> cb0<br />
        <input type="checkbox" name="cb1" id="cb1" /> cb1<br />
        <input type="checkbox" name="cb2" id="cb2" /> cb2
    </form>

    <script type="text/javascript">
    (function setupCheckboxSubmitter(form_) {
        form = $(form_);
        if (!form) {throw new Error('#setupCheckboxSubmitter could not find form:'+form_);}
        // collect the checkboxes we are interested in
        var boxes = form.select('input[type=checkbox]');
        form.observe('click', checkboxSubmitter);
        function checkboxSubmitter(event) {
            var element = event.findElement();
            // bail if it is not one of the elements of interest
            if (!(boxes.include(element))) {return;}
            var params = form.serialize(true);
            new Ajax.Request(form.action, {parameters: params});
        }
    })('theForm');// passing in a form id (or form element) here
    </script>

</body>

编辑 checkboxSubmitter 当然,是你喜欢的功能。或者让它成为一个回调,在表单id之后传入? 很高兴听到你在使用prototype.js!我是它的粉丝。