页面加载jQuery表单提交不起作用

Question

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                submitForm($("#login-user-one"));
            });

            function submitForm(form) {
                console.log($(form).attr("method"));
                $(form).submit();
            };
        </script>
    </head>
    <body>
        <form id="login-user-one" name="login" method="POST" action="/test.html">
            <input name="userid" tabindex="1" value="MyUser">
            <input name="pass" type="password" tabindex="2" value="MyPass">
            <input type="submit" name="submit" value="1" tabindex="3">
        </form>
    </body>
</html>

我不知道为什么上述不起作用。 日志向我显示了POST的值，但不会提交。 控制台中没有错误。

JS小提琴： https : //jsfiddle.net/t48hk9qx/

Answer 1

删除名称=在您的输入中提交将解决问题。 https://codesandbox.io/s/64kl2l3wvk 。 我认为是因为form.submit函数被名称= Submit的输入替换。

Answer 2

好吧，这对我来说是新的。

因为您的表单具有一个名为name="submit"的命名元素，所以该元素引用将替换HTMLFormElement.prototype.submit()函数。

从文档中 ...

命名输入将作为属性添加到其所有者表单实例，并且如果它们共享相同的名称，则它们可以覆盖本机属性（例如，具有名为action的输入的表单将具有其action属性，而不是表单的action HTML属性返回该输入）。

当以编程方式提交表单时，jQuery尝试执行该功能

if (typeof element.submit === 'function') {
  element.submit()
}

但在您的情况下， element.submit是一个HTMLInputElement 。

快速简便的解决方案，重命名您的Submit元素，或者在单按钮表单中更为常见，只需删除name属性。

如果您必须保留名为“ submit”的提交按钮，这似乎可行

function submitForm(form) {
  // note, "form" is already a jQuery object
  console.log(form.attr("method"));

  HTMLFormElement.prototype.submit.call(form[0])
}

页面加载jQuery表单提交不起作用

问题描述

2 个解决方案

解决方案1
1 2019-03-13 23:19:23

解决方案2
1 已采纳 2019-03-13 23:19:41

页面加载jQuery表单提交不起作用

问题描述

2 个解决方案

解决方案1 1 2019-03-13 23:19:23

解决方案2 1 已采纳 2019-03-13 23:19:41

解决方案1
1 2019-03-13 23:19:23

解决方案2
1 已采纳 2019-03-13 23:19:41