how to disable a button in its own javascript click event?

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?

maybe because you have an # in the html of the id of the button ;p — Hussein Nazzal
– Hussein Nazzal, Commented Jan 28, 2013 at 8:35

gillyspy · Accepted Answer · 2013-01-28 08:55:32Z

3

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).

answered Jan 28, 2013 at 8:55

gillyspy

1,6089 silver badges14 bronze badges

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

Comments

axel.michel · Accepted Answer · 2013-01-28 08:36:02Z

2

It is because you habve an error in the HTML, better, in the way you note the ID. The # is used to reference an ID-Name in CSS or in jQuery (#+Name). In HTML it is only the name, like this:

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

answered Jan 28, 2013 at 8:36

axel.michel

5,8741 gold badge18 silver badges25 bronze badges

Comments

Edwin Alex · Accepted Answer · 2013-01-28 08:36:48Z

2

You dont need to give # before id. Remove that from the code

Change like this,

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

answered Jan 28, 2013 at 8:36

Edwin Alex

5,0944 gold badges31 silver badges51 bronze badges

Comments

Iswanto San · Accepted Answer · 2013-01-28 08:37:09Z

1

Remove # from your button id will fix that.

answered Jan 28, 2013 at 8:37

Iswanto San

18.6k13 gold badges60 silver badges79 bronze badges

Collectives™ on Stack Overflow

how to disable a button in its own javascript click event?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related