Loading doesn't stop

[SimonIoa]

I have developed a script so that users can upload audio files (mp3). The problem is that you can't tell when the uploading has finished and so the user may submit the form. The load status that i have developed keeps showing the loader image without stopping.

I want help to know whats wrong with the script. And if anyone knows a better way for a progress bar.

the js file

$('#audioaud').die('click').live('change', function()           
{ 
var values=$("#uploadvalues_audio1").val();
$("#preview_audio_file").html('<img src="wall_icons/loader.gif"/>');
$("#audioform1").ajaxForm({target: '#preview_audio_file', 
     beforeSubmit:function(){ 
     $("#audioloadstatus1").hide();
     $("#audioloadbutton1").show();
     }, 
    success: function() { 
     $("#audioloadstatus1").hide();
     $("#imageloadbutton1").show();
    }, 
    error:function(){ 
     $("#audioloadstatus1").hide();
     $("#audioloadbutton1").show();
    } }).submit();

var X=$('.preview_audio_file').attr('id');
var Z= X+','+values;
if(Z!='undefined,')
{
$("#uploadvalues_audio1").val(Z);
} 

});

the html

<form id="audioform1" method="post" enctype="multipart/form-data" action='message_audio_ajax1.php'>
    <div id='preview_audio_file'>
    </div>
    <div id='audioloadstatus1'>
        <img src='<?php echo $base_url;?>wall_icons/ajaxloader.gif'/> Uploading please wait ....
    </div>
    <div id='audioloadbutton1'>
        <span id='addaudioaud'><b>Add an Audio file*:</b></span> <input type="file" name="audioaud" id="audioaud" />
        <small>(mp3, wav files)</small>
    </div><br />
    <input type='hidden' id='uploadvalues_audio1' />
</form>

Any help?

[JorgeM]

I dont recognize the method ajaxForm, so i assume this is a 3rd party plug in. have you checked the documentation? if you hit f12 and look at your browser's dev tools/console, do you see any errors?

[SimonIoa]

http://malsup.com/jquery/form/

No Jorxe there are no errors just the one you saw on the Error log that you answered here