Question

I am doing a file upload form with the following buttons: “Choose file”, “Upload” and “Add other file”

I am trying to remove the attribute “disabled” for Upload button when File Input change(). It works for the first Upload button, but not for the second Upload button and so on…
Why is that?

Thanks a lot if you could help me.

My jquery code is:

$(document).ready(function() {

$('input[type=file]').change(function(){
    $(this).next().removeAttr('disabled');
}); 

$('.add').click(function() {
    var num = $('input[type=file]').length; 

    newNum = num + 1;
    if (newNum >= 4){
        $('.add').hide();   
        }

    $('#addanother').append("<form method='POST'>");
    $('#photo1').clone().attr('id','photo'+newNum).appendTo('#addanother');
    $('#upload'+num).clone().attr('id','upload'+newNum).attr('disabled','disabled').appendTo('#addanother');
    $('#addanother').append('</form><br />');

    });
});

My html code is:

<form method='POST' enctype="multipart/form-data">
<input type='file' class='fileinput' id='photo1'>

<input type='button' id='upload1' name='upload1' value='Upload' disabled='disabled'>
</form>

<div id='addanother'></div>

<input type='button' class='add' id='add1' value='Add file'>

Answer 1

You are adding the 2nd upload button dynamically and so the event handler was not bound. Use .on in below syntax,

$(document).on('change', 'input[type=file]', function(){
    $(this).next().removeAttr('disabled');
}); 

and remove,

$('input[type=file]').change(function(){
    $(this).next().removeAttr('disabled');
});