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

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.