disable submit button until file selected for uplo

Question

I have a form for uploading images. I'd like to disable submit button, until user selects an image to upload. I'd like to do it with jQuery. Currently I have a JavaScript that prevent user from submitting the form more than once by disabling it on submit. It'd be nice to combine this functionality with the new one.

Here's what I've got now:

<script type="text/javascript">
function submitonce(theform) {
    //if IE 4+ or NS 6+
    if (document.all || document.getElementById) {
        //screen thru every element in the form, and hunt down "submit" and "reset"
        for (i = 0; i < theform.length; i++) {
            var tempobj = theform.elements[i]
            if (tempobj.type.toLowerCase() == "submit" || tempobj.type.toLowerCase() == "reset")
            //disable em
            tempobj.disabled = true
        }
    }
}
</script>
<form name="form" enctype="multipart/form-data" method="post" action="upload.php" onSubmit="submitonce(this)">
 <input type="file" name="my_field" value="" />
 <input type="submit">
</form>

Answer 1

Slightly simpler way using prop() which I think is the preferred way to do it now:

$('input:file').on("change", function() {
    $('input:submit').prop('disabled', !$(this).val()); 
});

Tested in IE, Chrome and FireFox.

Answer 2

If you're a fan of ternary expressions:

$(document).ready(function(){
    var $submit = $('#submit_document');
    var $file = $('#file_path');

    $file.change(
        function(){
            $submit.attr('disabled',($(this).val() ? false : true));
        }
    );
});  

Answer 3

Try

   $('#my_uploader').change(function() {
      if($(this).val()) {
        $('#my_submit_button').attr('disabled', '');
      } else {
        $('#my_submit_button').attr('disabled', 'disabled');
      }
    });

Answer 4

The following seems to work reliably in Chrome and Firefox (Ubuntu 10.10), I'm unable to check on other platforms at the moment:

jQuery

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                    $('input:submit').attr('disabled',false);
                    // or, as has been pointed out elsewhere:
                    // $('input:submit').removeAttr('disabled'); 
                } 
            }
            );
    });

html

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" value="submit" disabled />
</form>
<div id="result"></div>

Demo at JS Fiddle.

Answer 5

Instead of disabling the submit, is it potentially more helpful to offer instruction if the user presses it without selecting a file first? So add something like this as the onclick code of the submit?

var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty;

Note that your file control will need an ID as well as a name