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

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

prototypejs javascript

scaney · 技术社区 · 15 年前

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

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

我用的是原型1.6。

3 回复 | 直到 15 年前

Minimul 15 年前

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

garik 15 年前

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

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

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

npup 15 年前

我同意在这种情况下,最好将侦听委托给包含元素。因为这是您正在查看的复选框,“更改”或“单击”都可以工作。我在示例中选择“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!我是它的粉丝。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前