Submit form not working because of JS

Question

I have forms with file upload (images), and i want to limit those images to 500KB size. However, now the forms are not submitting and idk why. This is the code in jQuery

$('form').on('submit', function(e) {
e.preventDefault();
});


$('input:file').change(
function(e) {
    var files = e.originalEvent.target.files;
    for (var i=0, len=files.length; i<len; i++){
        var n = files[i].name,
            s = files[i].size,
            t = files[i].type;

        if (s > 500000) {

            $('.submit-btn1').click(function(){

                alert('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed (500KB). Sorry!');
                return false;
            })

        }
    }
})

$('input:file').change(
function(e) {
    var files = e.originalEvent.target.files;
    for (var i=0, len=files.length; i<len; i++){
        var n = files[i].name,
            s = files[i].size,
            t = files[i].type;

        if (s > 500000) {

            $('.submit-btn2').click(function(){

                alert('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed (500KB). Sorry!');
                return false;
            })

        }
    }
})

Those are 2 different forms. It worked yesterday, but now its not working. When i remove e.preventDefault(); it works, but the problem is, once i upload picture larger than 500KB, message pops and i cant submit the form (which is good), I change the pic to less than 500KB, the message is still popping when I try to submit again. It looks like that picture I first uploaded that is larger than 500KB is still used, doesnt matter if I upload a regular one instead.

Help please.

Answer 1

The reason you're still seeing the error after you've corrected the file size is because the click handler is still registered. If you want to keep it in this format, where the click handler is registered within the change handler, you will also need an else statement, to say that the click handler should be switched off.

I would prefer a more broken-down solution, where you define a flag variable, such as fileSizeAcceptable , which starts off as true , and is then switched to false inside the change handler if the file is too large, and set to true if it's not too large. Then, inside your click handler, check for that value before submitting the form.

Something along these lines:

var fileSizeAcceptable = true;

$('input:file').change(function(e) {
    var files = e.originalEvent.target.files;
    for (var i=0, len=files.length; i<len; i++){
        var n = files[i].name,
            s = files[i].size,
            t = files[i].type;

        if (s > 500000) {
            fileSizeAcceptable = false;
        } else {
            fileSizeAcceptable = true;
        }
    }
})

$('.submit-btn1').click(function(){
    if (!fileSizeAcceptable) {
        alert('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed (500KB). Sorry!');
        return false;
    }
})

Answer 2

In your code you're never letting the form being submitted. The endpoint of the 'uploading' action is always stopping at

$('form').on('submit', function(e) {
e.preventDefault();
});

I've changed your logic and file verification order, defined a flag that will check if the files are bigger than the limit an FINALY making the decision to submit the form or not.

Check this codepen and I hope you can understand your problem :)