运行 jQuery 的 submit() 函数时表单不提交答案

【问题标题】：Form does not submit when running jQuery's submit() function运行 jQuery 的 submit() 函数时表单不提交
【发布时间】：2010-08-25 03:49:35
【问题描述】：

我有一个带有以下 HTML 的表单：

    <form id="course_edit_form" name="course_form" action="/courses/save" method="post">
    <fieldset>
    <div id="side-left">
        <!-- Course Name -->
        <input type="hidden" id="course_id" name="course_id" value="${c.the_course.id}" />
        <div>
            <label for="name" id="name_label">Course name<em>*</em></label>
            ${h.tags.text("name", c.the_course.name, size=40)}
        </div>

        <!-- Event Type -->
        <div>
            <label for="type_list" id="class_type_label">Event type</label>
            <p>Use Ctrl to do multi-select</p>
            <select multiple="multiple" id="type_list" class="type-box required" name="type_list">
            % for ty in c.all_types:
                % if int(ty.id) in c.typeids:
                <option selected="selected" value="${int(ty.id)}">${str(ty.name)}</option>
                % else:
                <option value="${int(ty.id)}">${str(ty.name)}</option>
                % endif
            % endfor
                <option value="all">All</option>
            </select>
        </div>
        <div>....more input fields here</div>
    </div>
    <!-- Controls -->
    <div class="controls">
        <input id="delete" name="delete" type="button" value="Delete" />
        <input id="submit" name="submit" type="submit" value="Update" />
    </div>
    </fieldset>
</form>

我在我的提交按钮上附加了一个点击处理程序，以便我的 javascript 在提交实际表单之前首先验证我的表单。如果验证期间一切顺利，我会将标志“course_form_valid”设置为 true。在我的 javascript 的最后几行中，我有：

if (course_form_valid) {
    jQuery('#course_edit_form').submit();
}

但是，即使 course_form_valid 为真，上述行也不会提交表单。我什至尝试删除表单的操作和方法属性，并改用下面的 javascript，但这仍然行不通：

        if (course_form_valid) {
        jQuery('#course_edit_form').submit(function() {
        jQuery.ajax({
            url: '/courses/save',
            type: 'GET',
            data: jQuery('#course_edit_form').serialize(),
            async: false
        });
        });
    }

发生了什么事？有人可以帮帮我吗？

-马克

【问题讨论】：

能否请您添加一个 jsbin 工作示例？ www.jsbin.com
对不起，我忘了提到我的点击处理函数的第一行有 e.preventDefault();这会引起一些麻烦吗？
我似乎找不到问题，请提供任何其他 js 代码... course_form_valid 如何设置为 true ？你试过没有if 的jQuery('#course_edit_form').submit(); 吗？
嗯....最初我将其设置为 true。然后，如果在验证期间，某些字段是错误的，我会将该标志设置为 false。这是否消除了您的困惑？

标签： jquery forms submit

【解决方案1】：

首先我会在Firefox 中使用Firebug plugin 执行此操作。确保 HTTP 请求出现在控制台中，然后重试。你看到了什么？没有提出要求吗？如果没有提出请求，则永远不会到达提交。如果有提交，是否有后续错误？是404错误吗？如果是这样，请确保 /courses/save 存在。如果是 500 错误，则表示表单正在提交，但您的服务器端代码有问题。 Firebug 应该返回您的服务器发布的错误，这将帮助您从那里进行调试。

此外，请确保在“POST”表单时，您的后端代码已设置为接收 POST。

这可能会让你走上正轨！

【讨论】：

是的，我在 Firefox 中使用 Firebug 插件。我尝试在我的 JS 代码中添加断点，当我单步执行代码时，左边距的箭头确实指向 submit()，但是没有发出 HTTP 请求。

【解决方案2】：

试试这个，

if (course_form_valid) {
    $('#course_edit_form').submit(function() {
         return true;
    });
}

【讨论】：

【解决方案3】：

发生的情况是，您必须在用户提交表单后立即对其进行验证，然后您可以根据验证返回true 或false。

清除if statement。写这个：

jQuery('#course_edit_form').submit(function() {
if (course_form_valid) {
     return false; // It prevents form submition
}
jQuery.ajax({
 url: '/courses/save',
 type: 'GET',
 data: jQuery('#course_edit_form').serialize(),
 async: false
});
});

【讨论】：

【解决方案4】：

我通过删除 e.preventDefault() 并将 JS 代码的最后几行更改为：

解决了上述问题

        if (course_form_valid) {
        jQuery.ajax({
            url: '/courses/save',
            type: 'GET',
            data: jQuery('#course_edit_form').serialize(),
            async: false
        });
    }

感谢大家的帮助和快速响应时间。没有你们，不可能做到这一点。

【讨论】：