页面加载 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 Fiddle: https://jsfiddle.net/t48hk9qx/

Answer 1

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

的输入所取代

Answer 2

嗯，这对我来说是新的。

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

来自 documentation...

Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's action HTML attribute).

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 表单提交不起作用

Page Load jQuery Form Submit does not work

javascript

jquery

post

pageload