Question

我的表单中包含以下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为true，上述行也不会提交表单。我甚至试图删除我的表单的动作和方法属性，并使用下面的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
        });
        });
    }

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

-Mark

Answer 1

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

此外，请确保如果您在表单中“发布”后端代码设置为接收POST。

这可能会让你走上正轨！

Answer 2

试试这个，

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

Answer 3

当用户提交表单时，您必须将其验证为soons，然后您可以根据验证返回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
});
});

Answer 4

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

来解决上述问题。

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

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

运行jQuery的submit（）函数时，表单不会提交

4 个答案: