Hide the upload submit button if field "file" is empty

Question

With this simple example

<form action="" method="post" enctype="multipart/form-data">
            Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
        </form>

How can I hide the submit button until somthing's in the file field, I've tried to make a php script that look if the $_FILES['error'] == 4 or is_file_uploaded, etc and that don't work. So I want to simply hide the button until something is selected in the file field.

The answer could be in javascript, jQuery... I don't care :D

Thanks

Rob W · Accepted Answer · 2012-03-09 14:25:52Z

7

The <input type="file"> element has a files property.

Simply check files.length.

jQuery example, which modifies the submit button on the fly:

// Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
    var hasNoFiles = this.files.length == 0;
    $(this).closest('form') /* Select the form element */
       .find('input[type=submit]') /* Get the submit button */
       .prop('disabled', hasNoFiles); /* Disable the button. */
});

answered Mar 9, 2012 at 14:25

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Warface Over a year ago

Should the submit button be disabled at start??

Rob W Over a year ago

@Warface Yes, this can be done by adding disabled to your submit button.

Starx · Accepted Answer · 2012-03-09 14:28:19Z

0

Use this. Attach the code on the change event of the file field.

  $(function() {
     $("input:file").change(function() {
       var fileName = $(this).val();
       if(filename != "") { $("#submitButtonId").show(); } //show the button
     });
  });

answered Mar 9, 2012 at 14:28

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Comments

BnW · Accepted Answer · 2012-03-09 14:31:59Z

0

The default state of the submit should be hidden (CSS display: none) And on change event of the file field, you show that submit button

Her's the code

<script>
$(function() {
  $("#myfileinput").change(function() {
    if($(this)).val() != "") $("submit").show();
  });
});
</script/>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input id="myfileinput" type="file" name="images[]" multiple="multiple">
<input type="submit" name="submitImgs" value="Upload" style="display:none"/>
</form>

answered Mar 9, 2012 at 14:31

BnW

6021 gold badge4 silver badges13 bronze badges

Comments

Wietse de Vries · Accepted Answer · 2012-03-09 14:32:10Z

0

<script>
function checkFile() {
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    if(size > 0) {
        document.getElementById('submit').style.display='block';
    }
}
</script>
<form action="" method="post" enctype="multipart/form-data">
            Upload images: <input type="file" onChange="checkFile()" name="images[]" multiple="multiple"> <input type="submit" style="display:none;" name="submitImgs" value="Upload" id="submit" />
</form>

answered Mar 9, 2012 at 14:32

Wietse de Vries

6851 gold badge5 silver badges18 bronze badges

1 Comment

Rob W Over a year ago

ActiveXObject is a proprietary Micro$oft browser extension. This code does only sometimes work in (older versions of) IE. Also, getElementById is a function, not a property. Use parens instead of brackets.

Collectives™ on Stack Overflow

Hide the upload submit button if field "file" is empty

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related