Hide "Submit"/"Save" button until file has finished uploading

Question

I'm having a problem where my site users are submitting a form before the files they are uploading into filefield are finished, this is causing an ajax error to pop up along the lines of "an ajax HTTP request terminated abnormally".

To stop this mistake from happening is there a way to hide the "Submit"/"Save" button until file has finished uploading?

Answer 1

Havent tried this, but you might be able to use jquery's global ajax event handlers, to hide the submit button, in particular the .ajaxStart() and .ajaxComplete() handlers. Something like the following, added in a .js file in a custom module (not tested):

(function ($) {
  Drupal.behaviors.YOURMODULE = {
   attach: function (context) {
     $(document).ajaxStart(function(e){
       $('#edit-submit').hide();
     });
     $(docment).ajaxComplete(function(e){
       $('#edit-submit').show();
     });
   }
  };
})(jQuery);

You'd have to edit that to work the way you need it to, save it in a js file, and add it to the node edit form (or any other form you need it for).

Aside from that, the "ajax HTTP request terminated abnormally" errors occur in D7 whenever a http request is made before an ajax request has completed. In my opinion this is undesirable behaviour. It's been discussed here, for example, and the prevent js alerts module suppresses such errors across your site.

Answer 2

try this....

$('#edit-submit').bind('click',function() {
    $('#edit-submit').hide();
    $.ajax({
    url: Drupal.settings.life_style.secure_base_url+'path_to_form',
    data: data,
    type:'POST',
    async:true,
    cache:true,
    success: function(result) {
        //
        $('#edit-submit').show();
    },
         dataType: "html"
});

}