How to disable upload button during file upload and append

Question

By fluke I realise an issue which would cause a big problem with my application.

I have my application here where it will upload videos. Application

The problem I have is that if you upload a video and then click on the Add Question button to append another file input in a new row, the Upload button in the new row is not disabled, this means that you can upload multiple files which I do not want as it will stop the first file uploading to stop uploading and potentially system ould crash if users try to upload large multiple files. My question is that if I click on the Add Question button , if a file is uploading, then the upload button in the appended row(s) should be disabled until upload is finished?

To use app follow steps below:

1. Click on Add Question twice to append 2 new table rows. In each table row you will see a file input.

2. In file input in row 1 select a video (I select a decent size video so that file is uploading while you complete other steps) and click on Upload to upload video. You will now see that the Upload buttons are disabled while video is uploading

3. Now while video is uploading click on Add Question button again to append another row. Now you will see that the Upload button in the newly appended row is not disabled while the file is uploading. I want this button and other upload buttons which are appended to be disabled if a file is uploading.

Below is Relevant code where it appends the table rows from the Add Question button:

function GetFormVideoCount(){ 
  return $('.videouploadform').length + 1;
}


var qnum = 1;
var qremain = 5;

function insertQuestion(form) {   

    if (qnum > 5) {
    return;
}


    var $tbody = $('#qandatbl_onthefly > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $video = $("<td width='17%' class='video'></td>"); 

              $('.num_questions').each( function() {

    var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' >" + 
    "<p class='videof1_upload_form'><label>" + 
    "Video File: <input name='fileVideo' type='file' class='fileVideo' /></label><br/><br/><label class='videolbl'>" +  
    "<input type='submit' name='submitVideoBtn' class='sbtnvideo' value='Upload' /></label>" + 
    "<p class='videof1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /></p>" +
    "<input type='hidden' class='numvideo' name='numvideo' value='" + GetFormVideoCount() + "' />" + </p>" +
    "<iframe class='upload_target_video' name='upload_target_video' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>"); 

    $video.append($fileVideo);


    $tr.append($video);  
    $tbody.append($tr); 


}

Below is relevant code where when it starts the file's uploading process and where it disables the upload buttons in rows which are already appended:

   function startVideoUpload(videouploadform){

             sourceVideoForm = videouploadform;

            $(".sbtnvideo").attr("disabled", "disabled");


    }); 

          return true;
    }

Below is relevant code for function when uploading has finished:

function stopVideoUpload(success, videoID, videofilename){


      $(".sbtnvideo").removeAttr("disabled");


      return true;   
}

Below is video upload click handler:

   function videoClickHandler(videouploadform){ 
      if(videoValidation(videouploadform)){ 
          window.lastUploadVideoIndex = $('.videouploadform').index(videouploadform);
          return startVideoUpload(videouploadform); 
      } 
      return false;
  }

UPDATE:

function startVideoUpload(videouploadform){


               $(".sbtnvideo").click(function(event){
               $(".sbtnvideo").attr("disabled", "disabled");
    event.preventDefault();
    });

       return true;   
    }

    function stopVideoUpload(success, videoID, videofilename){


                $(".sbtnvideo").click(function(event){
                $(".sbtnvideo").removeAttr("disabled");
    return true;
});


          return true;   
    }

Answer 1

You can prevent the default behavior of the button then reenable it later.

$(".sbtnvideo").click(function(event){
    event.preventDefault();
});

$(".sbtnvideo").click(function(event){
    return true;
});