Question

I want to modify a form using javascript (after a user must have clicked the submit button) before I submit the it. The action involves an ajax call which must complete before I submit the form. The problem is that the submit event handler will finish execution and return false before the ajax will complete, and I’ve not been able to figure out how to submit the form after the ajax completes. Although I know that there’s some other way to do this, but I want to know if there’s how it can be done this way. Thanks.

$("form#profile").submit(function() {
    var dept;
    if (IsEmpty($("input[name=dept_id1]").val())) {
        return true;
    } else {
        dept = $("input[name=dept_id1]").val();
        $.post("funcs.php", {dept:dept}, function(d) {
            $("select[name=dept_id]").val(d);
            // It is at this point that I want to submit the form
            return true;
        });
    }
    return false;
});

Answer 1

$("form#profile").submit(function() {
    var dept;
    if (IsEmpty($("input[name=dept_id1]").val())) {
        return true;
    } else {
        dept = $("input[name=dept_id1]").val();
        $.post("funcs.php", {dept:dept}, function(d) {
            $("select[name=dept_id]").val(d);
            // It is at this point that I want to submit the form

            // unbind your submit handler
            $("form#profile").unbind('submit');

            // Optionally bind a new handler here

            // Submit it with no handler or new handler
            $("form#profile").submit();

            return true;
        });
    }
    return false;
});

Also note that instead of $("form#profile") you should us $("#profile") as it is a faster selector, and since id’s should be unique it will select the same element.