Question

var input = document.getElementById('thumbimg');
            input.addEventListener('change', function() {  $("input.imgcheck").attr("disabled", ""); }, false);

I use this code to enable the submit button when the user selects a file to upload.
But what If I want to add more than an upload field? I need to know how to enable the submit button only if all the upload fields are filled. Any Ideas?

Answer 1

Update:

@Simeon made an important comment and he is right. To solve this problem, you can inspect the value of each field and see whether it is empty or not:

var $fields = $('.thumbimg'),
    $submit = $("input.imgcheck"),
     numRequiredFields = $fields.length; // or 3 as per your comment (somewhere)

function runOnChange() {
    var $filledFields = $fields.filter(function(){
        return $(this).val() !== "";
    });
    if($filledFields.length >= numRequiredFields)
        // all fields changed
        // run logic here
        $submit.attr("disabled", "");
    }
    else {
        $submit.attr("disabled", "disabled");
    }
}

$fields.change(runOnChange);

I hoped to avoid inspecting every field on each change, but it seems this is unavoidable.

---

Original answer:

You would have to keep track of which fields have changed. If you have more than one file upload field, you have to use classes, not IDs:

var numFields = $('.thumbimg').length,
    changedFields = 0;

function runOnChange() {
    changedFields++;
    if(changedFields >= numFields) {
        // all fields changed
        // run logic here
        $("input.imgcheck").attr("disabled", "");
    }
}

$('.thumbimg').change(runOnChange);

Also, if you use jQuery anyway, then be consistent and use it throughout the script. Especially don’t use addEventListener, which does not work in IE8 and below. jQuery is there to abstract from this browser differences.