无法使用 jquery 提交表单答案

【问题标题】：form could not be submitted using jquery无法使用 jquery 提交表单
【发布时间】：2015-10-28 04:35:04
【问题描述】：

我有以下脚本，它只是我实际代码的一个示例，但它的行为与实际代码相同：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="http://google.com/">
        <input type="text" name="item_name" />
        <input type="hidden" name="submit" value="save" />
        <a href="" id="save">Submit</a>
    </form>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        jQuery(function($){
            $('#save').on('click', function(e){
                e.preventDefault();

                $('form').submit();
            });
        });
    </script>
</body>
</html>

可以看到，有a标签，id为save，就是点击这个链接的时候，表单应该提交，但是没有。这是由名称为 submit 的隐藏输入引起的，如果我更改名称，它就可以正常工作。

在 linux 上的 chrome 和 firefox 上都试过了。谁能解释一下？

这里是fiddle

-- 编辑--

我尝试使用原生点击事件：

document.getElementById('save').onclick = function(e){
    e.preventDefault();
    document.getElementsByTagName('form')[0].submit();
}

表单也不能提交。

【问题讨论】：

@Pekka 如果我删除该行，则该链接将充当通常的链接。表单未提交
@.@ 不，这实际上是一个复杂的情况...我使用内联编辑，这就是我使用锚标记的原因
有人已经问过这个问题：stackoverflow.com/questions/8729319/… - 基本上 document.getElementById('redirectForm').submit 指向一个 DOM 元素，而不是指向一个函数，如果有一个名为 = submit 的元素跨度>
哇很酷，谢谢你指出我@kajyr
查看 action 属性，删除 e.preventDefault() 不会使表单提交，而只是去/刷新页面。

标签： javascript jquery html

【解决方案1】：

我认为这与此问题相同： TypeError: e[h] is not a function

有一个名为 submit 的输入会向表单添加一个“提交”属性，这意味着您不能将 .submit() 作为函数调用。

您应该将隐藏的输入命名为其他名称。

【讨论】：

【解决方案2】：

您的 HTML 应该如下所示。

<form  action="index.php">
    <input type="text" name="item_name" />
    <a href="#" id="save">Submit</a>
</form>

您可以使用触发器（'submit'）修复它

jQuery(function($){
        $('#save').on('click', function(e){
            e.preventDefault();
            $('form').trigger('submit');

});

JsFiddle

【讨论】：

【解决方案3】：

您需要将输入按钮的名称从“提交”更改为其他名称。拥有一个名为“submit”的元素会导致表单的提交方法不再起作用，这意味着表单无法通过 JavaScript 提交（至少，不容易）。

这是因为一个名为“submit”的输入元素可以通过它的名称来引用，如下所示：form1.submit。即输入元素作为表单对象的属性添加，属性名称为输入元素的名称。这基本上隐藏了表单原型上的提交功能。

【讨论】：

确实，我将字段名称更改为其他名称，然后在php文件中进行调整。

【解决方案4】：

这是 jQuery 命名歧义问题。你不应该声明任何表单元素名称 id submit 调用时冲突重复引用。

当用户尝试提交表单时，提交事件被发送到元素。它只能附加到<form> 元素。可以通过单击显式的<input type="submit">、<input type="image"> 或<button type="submit"> 来提交表单，或者在某些表单元素具有焦点时按 Enter。

根据浏览器的不同，回车键可能只会导致一个表单如果表单只有一个文本字段，则提交，或者仅当有是一个提交按钮。接口不应依赖于此键的特定行为，除非问题是由观察按下 Enter 键的 keypress 事件。

由于 .submit() 方法只是 .on( "submit", handler ) 的简写，因此可以使用 .off( "submit" ) 进行分离
表单及其子元素不应使用与表单属性冲突的输入名称或 ID，例如 submit、length 或 method。 名称冲突可能会导致令人困惑的失败。

【讨论】：