Disable "Submit" button if there is no file in the drop zone
I have an implemented redirect zone in my code, however I would like to disable the submit button on the form on my page, when there are no files uploaded to the drop zone, I have the following code:
<script>
// "myAwesomeDropzone" is the camelized version of the HTML element 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, this will not work. Can anyone know why? Thank you! I tried to disable sending the code outside and it works, it looks like the control part is not working.
Actually the basis is that I need javascript code so that depending on the condition, disable / enable the submit button dynamically (without refreshing the page). In this case, I am using a dropzone and the marquee does not support multiple elements, so I am trying to get a workaround in the simplest way possible while validating all form elements at the same time.
source to share
Check for the correct version of the HTML element id. Is "imageuploaddrop" true? If only you want the submit button to be enabled when the image is loaded; you can try installing
autoProcessQueue: true
and
init: function () {
var submit2 = document.getElementById('submit2');
submit2.disabled = true;
this.on("complete", function (file) {
submit2.disabled = false;
});
}
source to share