使用 mooTools 提交表单，并让表单内联 onsubmit 事件 fire...help

发布于 2024-10-24 06:08:27 字数 1043 浏览 2 评论 0原文

我正在编写一个类，用自定义按钮替换文档中的所有 input type="button" 和 input type="submit" ，这实际上是一个填充在一个锚标记，我已经写好了所有内容，并且一切正常，除了使用 JavaScript 提交表单时不会触发内联 onsubmit 事件。

实际上，即使编写静态锚标记

<a href="javascript:void(0)" onclick="document.FORMNAME.submit();">Submit</a>

也不会触发表单的内联 onsubmit 事件，但将触发该事件。 ..无论如何，必须有一种方法可以使用 javascript 触发此 onsubmit 事件。

这是我正在处理的内容的片段：

click: function() {

    //get parent form
    var thisForm = this.getParent('form');

    //fire onsubmit event
    thisForm.fireEvent('submit'); //this doesnt work!

    //submit form...the event isn't fired here either!
    thisForm.submit();

}

有人有什么想法吗？这个类不需要配置，并且有一些旧站点使用我们的 cms 系统，我们希望将其插入其中，并且我们需要考虑的表单上有相当多的内联提交事件

感谢

更新，

我接受了建议并且想出了这个：

if(this.getParent().onsubmit()) {
    this.getParent().submit();
}

非常适合评估表单 onsubmit 事件并根据其输出提交表单，但是如果该函数根本不存在怎么办？有什么想法吗？

原文

Im writing a class that replaces all input type="button" and input type="submit" in the document with a custom button, that is actually a span stuffed inside of an anchor tag, i've got everything written, and it all works, except the inline onsubmit event is not being fired when the form is submitted with a javascript.

Actually, even writing a static anchor tag

<a href="javascript:void(0)" onclick="document.FORMNAME.submit();">Submit</a>

will not fire the inline onsubmit event for the form, but <input type="submit" /> will fire the event...anyways there has to be a way to fire this onsubmit event with javascript.

Heres a snippet of what im working with:

click: function() {

    //get parent form
    var thisForm = this.getParent('form');

    //fire onsubmit event
    thisForm.fireEvent('submit'); //this doesnt work!

    //submit form...the event isn't fired here either!
    thisForm.submit();

}

anybody have any ideas? this class needs to need no configuration and there are some older sites using our cms system that we want to plug this into, and there are quite a few inline submit events on the forms we need to account for

Thanks

UPDATE,

I took the suggestion and came up with this:

if(this.getParent().onsubmit()) {
    this.getParent().submit();
}

works perfectly for evaluating the forms onsubmit event and submitting the form based on its output, but what if the function doesn't exist at all? Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╭⌒浅淡时光〆 2024-10-31 06:08:27

在表单上触发 submit 不会触发它的内联 onSubmit，这是默认的 javascript 行为（发现此：http://www.codestore.net/store.nsf/unid/DOMM-4QS3RL/)

您可以尝试调用 不过，你自己提交，这对我有用：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script>
        <script type="text/javascript" charset="utf-8">
            window.addEvent('domready', function(e) {
               $('span.submit').each(function(el) {
                  el.addEvent('click', function(e) {
                    this.getParent().onsubmit();
                  });
               });
            });
        </script>
    </head>
    <body>
        <form method="post" onsubmit="alert('hi');" class="form">
            <input type="text" value="test" />
            <span class="submit">Submit the form</span>
        </form>
    </body>
</html>

Firing submit on a form doesn't trigger it's inline onSubmit, this is default javascript behaviour (found this: http://www.codestore.net/store.nsf/unid/DOMM-4QS3RL/)

You can try calling onsubmit yourself though, this works for me:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script>
        <script type="text/javascript" charset="utf-8">
            window.addEvent('domready', function(e) {
               $('span.submit').each(function(el) {
                  el.addEvent('click', function(e) {
                    this.getParent().onsubmit();
                  });
               });
            });
        </script>
    </head>
    <body>
        <form method="post" onsubmit="alert('hi');" class="form">
            <input type="text" value="test" />
            <span class="submit">Submit the form</span>
        </form>
    </body>
</html>

回复收藏 0 原文

旧时光的容颜 2024-10-31 06:08:27

您可能想尝试此代码，因为它将检查 onsubmit 事件是否已附加为事件侦听器而不是硬编码属性。如果事件作为侦听器附加，则 [form element].onsubmit() 部分将不起作用。

    function myOnSubmit(formId){
        var f = document.getElementById(formId);
        if(document.createEvent){
            var e = document.createEvent('Event');
            e.initEvent('submit',true,false);
            f.dispatchEvent(e);
        } elseif(document.createEventObject){
            var e = document.createEventObject('Event');
            e.button = 1;
            f.fireEvent('onsubmit',e);
        } elseif(typeof(f.onsubmit) == 'function'){
            f.onsubmit();
        }
    }

You might want to try this code instead as it will check to see if the onsubmit event has been attached as an event listener rather than being a hard encoded attribute. If the event was attached as a listener the [form element].onsubmit() part won't work.

    function myOnSubmit(formId){
        var f = document.getElementById(formId);
        if(document.createEvent){
            var e = document.createEvent('Event');
            e.initEvent('submit',true,false);
            f.dispatchEvent(e);
        } elseif(document.createEventObject){
            var e = document.createEventObject('Event');
            e.button = 1;
            f.fireEvent('onsubmit',e);
        } elseif(typeof(f.onsubmit) == 'function'){
            f.onsubmit();
        }
    }

回复收藏 0 原文

~没有更多了~