Question

我想观察多个表单字段中的更改，并使用组合值回调服务器。我想要观察的字段是选择框。

我是否通过触发父元素的“onchange”事件来执行此操作？

我正在使用Prototype 1.6。

Answer 1

这只是一个想法。将所有控件的容器都记录到任何事件并捕获它们。

控件将生成事件，容器上的处理程序将处理它们（它是冒泡过程）

它在jquery中工作，我希望能在原型中工作

Answer 2

使用onchange并不总是满足，因为它不能很好地记录我的经验。在此使用定时观察者模式http://prototypejs.org/api/timedObserver/form-element-observer

Answer 3

我同意在这种情况下最好委托收听包含元素。由于它是您正在查看的复选框，因此“更改”或“点击”都可以。我去了示例中的“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！我是它的粉丝。

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

3 个答案: