JQuery 提交表单 - 发现错误答案

【问题标题】：JQuery to Submit a Form - Spot the ErrorJQuery 提交表单 - 发现错误
【发布时间】：2014-03-23 21:32:18
【问题描述】：

我检查了here 和here，但无法提交我的表单。（Jquery 的菜鸟...）

<html>
<head>
    <title>Book Notes Application - Subjects</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $('#subject_id').change(function(){
                var subject_id = $(this).val();
                //alert(subject_id)
                //document.forms["choose_subject"].submit();
                $('#choose_subject').submit();
                //$('form#choose_subject').submit();
                //$('form#choose_subject')[0].submit();
                //alert(subject_id);
                //document.getElementById("choose_subject").submit();
            })
        })
    </script>
</head>
<body>
    <!-- CHOOSE SUBJECT -->
    <FORM action="/books" id="choose_subject" name="choose_subject" method="POST">
        Choose a Subject:
        <select name="subject_id" id="subject_id">
                <option value="1">a</option>
                <option value="2">a2</option>
        </select><input type="submit" name="submit" value="Choose Subject"/>
        <BR />
    </FORM>
    <!-- CREATE SUBJECT -->
    <FORM action="/subjects" id="create_subject" method="POST">

        <BR /><BR />
        Create a new Subject
        <input type="text" name="subject_name" />
        <input type="submit" name="submit" value="Create Subject" />
    </FORM>
<body>
</html>

这些方法我都试过了：

1) document.forms["choose_subject"].submit();
2) $('#choose_subject').submit();
3) $('#choose_subject')[0].submit();
4) $('form#choose_subject').submit();
5) $('form#choose_subject')[0].submit();
6) document.getElementById("choose_subject").submit();

第一个和最后一个结果是“TypeError: document.forms.choose_subject.submit is not a function.

第二个和第四个没有错误，但它们也没有做任何事情。

第三个和第五个错误是“TypeError: $(...)[0].submit is not a function”

如果我删除第二种形式，这些结果仍然成立。

单击提交按钮按预期工作。

【问题讨论】：

您指定表单提交的数据类型了吗？
你能发布呈现的 HTML，而不是任何内容。其他东西正在干扰，因为如您所见，使用您的代码的基本 jsFiddle 可以工作：jsfiddle.net/j08691/66f7Y。尽管即使没有 jQuery，它仍然会提交。
@j08691 使用呈现的 HTML 进行编辑（顺便说一句，它是 python 的 Bottle）
@Mr.Student 请原谅我；你什么意思？
您的页面上是否运行了其他 JavaScript？我不明白为什么你需要 JS 来提交表单，因为默认情况下提交按钮会这样做。

标签： javascript jquery html

【解决方案1】：

更改输入元素的名称：

<input type="submit" name="submit" value="Choose Subject"/>

到“提交”以外的东西。作为.submit() docs state：

表单及其子元素不应使用输入名称或 ID 与表单的属性冲突，例如提交、长度或方法。名称冲突可能会导致令人困惑的失败。

jsFiddle example

【讨论】：

+1 非常棒！
@druciferre - 谢谢。我会将其归档在文档所指的“令人困惑的失败”下；）