The form is not submitted when the jQuery submit () function is run

Question

I have a form with the following HTML below:

    <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>

I attached a click handler to my submit button so that my javascript first validates my form before submitting the actual form. If everything is okay during the check, I will set the flag "course_form_valid" to true. In the last pairs of my javascript, I have:

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

However, the above line never submits a form even if the value of course_form_valid is true. I even tried to remove the action and method attributes of my form and instead used javascript below, but it still wouldn't work:

        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
        });
        });
    }

What's happening? Can someone please help me?

-Mark

Answer 1

, e.preventDefault() JS- :

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

. , .

Answer 2

Firefox Firebug. , HTTP-, . ? ? , . , ? 404? , , /courses/save. 500, , , . Firebug , , .

, , "POST", - POST.

, !

Answer 3

,

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

Answer 4

What happens is that you have to check it as an entity, as the user who submits the form, then you can return trueor falsedepending on the check.

destroy it if statement. Write only this:

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
});
});