Question

Im using a form to upload files to my server and I want to load a progress bar when the form validates. This is code I have with jQuery:

$(document).ready(function(){
    $("#uploadform").submit(function(e){
        var valid_form = validateForm();

        if (valid_form){
            $("#pb").load("/php/progressbar.php");
        }
        return valid_form;
    });
});

The problem is I get this message after submit:

GET http://ftplink.wedo/php/progressbar.php undefined (undefined)

But the weird thing is that I tried inverting the condition of the IF and when the form doesnt validate, the ajax loading actually happens. What is going on??

Answer 1

Can’t tell everything from your question. I would guess that the form submit is happening while there is an active ajax request. You should return false, then submit the form when ajax finishes loading the progress bar.

if (valid_form){
    $("#pb").load("/php/progressbar.php", function(){
        $("#uploadform").unbind('submit').submit(); // unbind so you are not recursive
    });
}
return false;