CODEWITHSUNDEEP
javascriptjquerysubmitdropzone.js
userxxxso
userxxxso

Reputation: 165

Disable Submit button when no file in drop zone

i have an implemented drop zone in my code, however i would like to disable a submit button in a form in my page, when there are no files uploaded onto drop zone, i have the following code:

<script>
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.imageuploaddrop = {
    paramName: "fileimage",
    maxFilesize: 10, // MB
    autoProcessQueue: false,
    uploadMultiple: false,
    maxFiles: 1,
    addRemoveLinks: true,
    clickable: true,
    acceptedFiles: ".jpg,.png,.jpeg,.tif",
    dictInvalidFileType: "Invalid File Type. Only Jpg, Png and Tif are supported.",
    dictFileTooBig: "File too Big. Maximum 10 MB!",
    dictMaxFilesExceeded: "We only need one image.",

    init: function () {
        this.on("complete", function (file) {

            var myDropzone = this;
            if (myDropzone.getAcceptedFiles().length = 1) {
                myDropzone.processQueue();
            } else {
                done("There is an Error.");
                var submit2 = document.getElementById('submit2');
                submit2.disabled = true;
            }
        });
    }
};
</script>

However, it does not work. Anyone can find out why? Thanks! I tried the disable submit code outside and it works it seems like the checking part is not working.

Actually the basis is that i need the javascript code to such that depending on the condition, disable/enable the submit button dynamically (without page refresh). In this case I'm using drop zone, and drop zone doesn't really support multiple elements, so I'm trying to get a workaround in the simplest possible way while validating all form elements at the same time.

Upvotes: 4

Views: 2284

Answers (1)

Yunus
Yunus

Reputation: 23

Please check camelized version of the HTML element's ID. "imageuploaddrop" is that true? If only you need a submit button enabled when you upload an image; you can try setting

autoProcessQueue: true

and 

init: function () {
    var submit2 = document.getElementById('submit2');
        submit2.disabled = true;
    this.on("complete", function (file) {
            submit2.disabled = false;            
    });
}

Upvotes: 2

Related Questions