Question

I have a function that starts on the submission of a form #uploadform which is enctype="multipart/form-data". The issue is that when this form is submitted, I run another function that sends a post request to a document and receives information. I would like this information to submit with the initial form #uploadform but it seems that this post call happens after the form submission so the values do not get added. #progress_key is added to the form successfully because it happens before the post call. Anyone have any ideas around this?

$('#uploadform').submit(function(){

beginUpload();

}


function beginUpload() {
$('#progress_key').val(rand_id);

$.ajax({
type: "POST",
url: "progressbar/initial.php",
data: 'data,
dataType: 'json',
success: function(response, statusText) {

if(response.error == '') {  

vid_id=response.vid_id;
file_name=response.file_name;

$('#file_name').val(vid_id);
$('#vid_id').val(file_name);
}
}
});
}

Answer 1

To do this, and avoid making a sychronous ajax request you can return false from your submit handler like this:

$('#uploadform').submit(function(){
    beginUpload();
    $(this).unbind('submit');
    return false;
}

Then submit it at the end of the success function of your ajax call like this:

$('#uploadform').submit();