Question

I have a button that is appended on a form. The form is dynamically created at some point in the application, and the button is appended like so:

$('#imgform').append("<center><input type='submit' value='Upload' id='#imgupload' onclick='showUploadedItem()'/>");

This is my code for showUploadedItem():

function showUploadedItem () {
    $('#upload_process').show();
            // a bunch of other things to do
           $('#imgupload').prop('disabled',true);
           console.log("the submit button ID is: " + $('#imgupload').attr('id'));
}

But the console.log message says the button ID is undefined, which means that at this point in the code the button doesn’t even exist. I can understand that it was dynamically created and perhaps I need to bind the event, but how did it even get clicked then, and even show the console message at all?

How can I disable this button within the function? Or is it not even possible?

Answer 1

Your html is using id="#imgupload" which does not appear legal. Although for fun I was able to get a selector this to work:

 $('#\\#imgupload').prop('disabled',true);

That sure looks like a mistake though and your html should simply be id="imgupload"

fiddle

Also if you’re using jQuery why use the inline javscript? Simply bind an event handler (see fiddle for that too).