Prevent click on form button while file is loading

Question

I am using the following snippet which allows a person to upload up to 3 files with a single upload button. While the file is being uploaded an animation runs in place of the upload button.

My requirement is that I need to prevent the user from clicking on any of the input field buttons while the file is getting uploaded. I do not wan't to use the hide() function for this. Is there a way in jQuery to stop the input field buttons from getting clicked on while the file is getting uploaded/the loading animation is running. Recently started to use jQuery so still a beginner and hence would love to use a simple solution for this. Thanks!

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click", ".UploadBtn", function(event) {
            $(".p").each(function(file) {
                if  ($(this).val()) {
                    $(".loader").show();
                    $(".spinner").show();
                    $(".UploadBtn").hide();
                }
            })
        });
    });
</script>

My HTML code is below. The "p" class is used for {{ form.photo1 }}, {{ form.photo2 }} & {{ form.photo3 }} ;

<div class="mtl mbl">
{{ form.photo1 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

<div class="mtl mbl">
{{ form.photo2 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

<div class="mtl mbl">
{{ form.photo3 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

When the upload button, which the red button is pointing at, is clicked an animation starts to run in its place while the file is getting uploaded. During this I want to prevent anyone from clicking on the choose file (), the blue arrow is pointing at it.

add attr dynamically after upload process started or after click on upload button — error404, Jul 26 '17 at 18:35

score 0 · Answer 1 · answered Jul 26 '17 at 18:39

0

Try using prop to disable upload buttons

$(document).ready(function() {
 $(document).on("click", ".UploadBtn", function(event) {
  $(".p").each(function(file) {
    if  ($(this).val()) {
      $(".loader").show();
      $(".spinner").show();
      $(".UploadBtn").prop("disabled", "true");
    }
  })
 });
});

answered Jul 26 '17 at 18:39

Ayush

479
2
9
24

I am trying to prevent the select file button from getting clicked not the upload button as the loading animation runs in its place and the upload button disappears. I just want to prevent the select file button which is part of {{ form.photo1 }}, {{ form.photo2 }} & {{ form.photo3 }}. Also once the file(s) gets uploaded the page refreshes. – shahz Jul 26 '17 at 18:49
Hey, I can't seem to find the code for select button in the code you posted? – Ayush Jul 26 '17 at 18:54
For refreshing the page: You can have a callback, and based on the result of file upload you can toggle the value of `disabled` and refresh the page. – Ayush Jul 26 '17 at 18:55
The page is getting refreshed via Django/Python hence I am not worried about that and just wanted to provide the page refreshing info to you. The select button has been added by the and Django is used its logic. I have given those input forms "p" class. Also I want to prevent click on the select file button( ) while the loading animation is running i.e. the file is getting uploaded. – shahz Jul 26 '17 at 19:02

score 0 · Answer 2 · answered Jul 26 '17 at 18:40

0

In jQuery 1.6+ you can dynamically add the atrribute attr='disabled' or attr='readonly' to your input field until you confirm that your files are loaded:

// put this within the code that checks if the files are still loading
$(".UploadBtn").prop('disabled', true);

// within the code that checks if the files have successfully loaded, make sure to use the following
$(".UploadBtn").prop('disabled', false);

Also take a quick look at what prop does in this detailed answer.

answered Jul 26 '17 at 18:40

AGE

3,752
3
38
60

I am trying to prevent the select file button from getting clicked not the upload button as the loading animation runs in its place and the upload button disappears. I just want to prevent the select file button which is part of {{ form.photo1 }}, {{ form.photo2 }} & {{ form.photo3 }}. Also once the file(s) gets uploaded the page refreshes. – shahz Jul 26 '17 at 18:49

Prevent click on form button while file is loading

2 Answers2