如何在输入id等于'submit'的情况下提交javascript [英] How to javascript submit in the presence of an input id equal to 'submit'

问题描述

我已经将提交事件绑定到表单，并确保它们不会破坏表单，使用这样的jQuery：

I've been binding submit events to forms, and ensuring that they do not break the form, using jQuery like this:

jQuery('form').submit(function(e){
    var form = this;
    e.preventDefault(); 
    alert('1');
    setTimeout(function() {   
        alert('2');
        form.submit();
        }, 1000);

    });

这一切都很好，除非由于某种原因前端开发人员给孩子输入这个形式的id为=submit，这会打破，因为 form.submit（）会抛出一个JavaScript错误（在Chrome中，'未捕获TypeError：属性'提交'的object＃不是函数'）。

This is all good and well, except, if for some reason a front end developer gave a child input of this form an id of ="submit", this breaks, as form.submit() throws a JavaScript error (In Chrome, 'Uncaught TypeError: Property 'submit' of object # is not a function').

你可以在这里看到一个例子： http：/ /jsfiddle.net/q68ky/ （以下是没有< input id =submit> 的行为： http://jsfiddle.net/JpXzL/

You can see an example of that happening here: http://jsfiddle.net/q68ky/ (Here's the behavior if there's no <input id="submit">: http://jsfiddle.net/JpXzL/

现在，我知道我可以预防这是来自具有id为'submit'且具有 jQuery（'form'）的子项的表单上的绑定。不（：has（'＃submit'））。submit（），表单将处理得很好，但我的绑定永远不会触发那些表单。

Now, I know I can prevent this from binding on forms that have children with an id of 'submit' with jQuery('form').not(:has('#submit')).submit(), and the form will process just fine, but my binding will never fire for those forms.

所以，问题是：如何安全地将这个jQuery函数绑定到所有表单，包括那些< input id =submit> ？

So, the question: How can I safely bind this jQuery function to all forms, including those with <input id="submit">?

编辑：值得注意的是这个如果我取消绑定提交处理程序然后在 jQuery（表单）上触发jQuery提交，问题不会消失。

Worth noting that this problem doesn't go away if I unbind the submit handler and then trigger a jQuery submit on jQuery(form).

推荐答案

我能想到的唯一方法：

(function () {
    var method;

    window.submit = function (theForm) {
        if (!method) {
            method = document.createElement("form").submit;
        }

        method.call(theForm);
    };
}());

然后拨打提交（theFormYouWantToSubmit）。

您可以在此处看到它： http：// jsfiddle.net/q68ky/2/

You can see it in action here: http://jsfiddle.net/q68ky/2/

编辑：提供一些解释，说明这一点....

此方法创建一个新的表单元素（ document.createElement（form）），并存储对它的submit属性（ method = document.createElement（form）。submit ）。因为这是一个新创建的表单元素，没有子节点，我们可以保证submit属性实际上是我们需要的submit方法，而不是id / name为submit的子节点。

This method creates a new form element (document.createElement("form")), and stores a reference to the "submit" attribute of it (method = document.createElement("form").submit). Because this is a newly created form element, with no child nodes, we can guarantee that the "submit" attribute is actually the "submit" method we need, rather than a child node with an id/name of "submit".

然后我们使用 调用 方法（ Function.prototype 的一部分），它设置<$ c $的上下文c>将方法提交到我们想要提交的表单，而不是窗口对象，否则它就会出现。

We then use the call method (part of Function.prototype), which sets the context of the submit method to the form we want to submit, rather than the window object, which is what it would otherwise be on.

片段中的其余gubbins缓存了 submit 方法，因此所有这些（虽然很小）的开销都没有每次要提交表单时都会发生，并在本地范围内捕获缓存的方法，而不是将其保存在全局范围内并污染全局命名空间。

The rest of the gubbins in the snippet caches the submit method, so that all of this (albeit small) overhead does not take place every time you want to submit the form, and captures the cached method in a local scope, instead of holding it in the global scope and polluting the global namespace.

这篇关于如何在输入id等于'submit'的情况下提交javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！