Form does not submit when running jQuery's submit() function

Question

Hi,

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 will first validate my form before submitting the actual form. If everything goes well during validation, I will set a flag "course_form_valid" to true. In the last couple lines of my javascript I have:

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

However, the above line never submits the form even when course_form_valid is true. I even tried removing the action and method attributes of my form and used the below javascript instead, but still this would not 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 is going on? Can someone please help me?

-Mark

Answer 1

First I would do this in Firefox with the Firebug plugin. Make sure that HTTP requests appear in the console and then try again. What do you see? Was no request made? If no request was made, then the submit is never getting reached. If there is a submit, is there a subsequent error? Is it a 404 error? If so, make sure that /courses/save exists. If it's a 500 error, that means that the form IS submitting, but you have a problem in your server side code. Firebug should return with the error that your server is posting, which will help you debug from there.

Also, make sure that if you are "POST"ing your form that your backend code is set to receive a POST.

That should probably get you on the right track!

Answer 2

Try this,

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

Answer 3

What happens is that you have to validate it as soons as the user submit the form, then you can return true or false depending on the validation.

wipe out the if statement. Write just 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
});
});

Answer 4

I fixed the above issue by removing e.preventDefault() and by altering the last few lines of JS code to:

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

Thanks for everyone's help and speedy response times. Couldn't have done this without you guys.