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

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

Oh sorry I forgot to mention that the first line of my click handler function has e.preventDefault(); Is this causing some hiccups? — Mark
– Mark, Commented Aug 25, 2010 at 4:04
I can't seem to find the problem, any other js codes please... how does course_form_valid being set to true ? have you tried jQuery('#course_edit_form').submit(); without the if ? — Reigel Gallarde
– Reigel Gallarde, Commented Aug 25, 2010 at 4:07
Well....initially I set it to true. Then if during validation, some field is wrong, i will set that flag to false. Does this clear up your confusion? — Mark
– Mark, Commented Aug 25, 2010 at 4:09

Jason · Accepted Answer · 2010-08-25 03:54:16Z

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!

answered Aug 25, 2010 at 3:54

Jason

52.7k38 gold badges139 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Over a year ago

Yes I am using the Firebug plugin in Firefox. I tried adding breakpoints in my JS code and when I step through the code, the arrow on the left margin does point to submit(), however no HTTP Request was made.

Manie · Accepted Answer · 2010-08-25 03:57:29Z

1

Try this,

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

answered Aug 25, 2010 at 3:57

Manie

2,0382 gold badges16 silver badges19 bronze badges

Comments

Rodrigo Souza · Accepted Answer · 2010-08-25 03:59:39Z

1

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

answered Aug 25, 2010 at 3:59

Rodrigo Souza

7,38212 gold badges44 silver badges73 bronze badges

Comments

Mark · Accepted Answer · 2010-08-25 04:20:17Z

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.

answered Aug 25, 2010 at 4:20

Mark

2,1354 gold badges27 silver badges44 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related