Control a text box using javascript

Question

I am trying to disable a control on a page using javascript.. I am doing the following but not able to do it successfully.. anything I am missing, please point out..

       if (some condition) {        
        var textBoxTemp = document.getElementById('_ctl21_m_txtTemp');
        textBoxTemp.disabled = true;
        }

I got the element id by looking at the source of the page. In the source the id shows

_ctl21:m_txtTemp

I tried using both

_ctl21:m_txtTemp and _ctl21_m_txtTemp

in the second line of code above..

Are you sure that testBoxTemp exists? sounds like you're using ASP controls - view-source the page and double check the element's id — web_bod, May 17 '12 at 17:52

score 2 · Accepted Answer · edited May 23 '17 at 11:56

2

You can use jquery prop() to disable the textbox.

$("[id$=txtTemp]").prop("disabled", true);

Note: prop() is only available after jquery 1.6. If you are using an earlier version, you can use attr() instead:

$("[id$=txtTemp]").attr("disabled", "disabled");

Edit:

Since ASP.NET tends to mangle the ID of a control, there are several different ways you can find the control on the page such as:

$('[id$=txtTemp]')
$('#<%= txtTemp.ClientID %>')

Edit:

Since you seem to think that your control could be in an iframe, I found this solution from the following stackoverflow question: how-can-i-access-iframe-elements-with-javascript

function iframeRef( frameRef ) {
    return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}

var iframe = iframeRef( document.getElementById('iframeID') )

You will now be able to search the iframe content as if it was the document via:

iframe.getElementByID('<%= txtTemp.ClientID %>').disabled = true;

edited May 23 '17 at 11:56

Community

1
1

answered May 17 '12 at 17:50

Josh Mein

28,107
15
76
87

tried all these ideas.. it does not seem to work.. I am suspecting the problem lies somewhere else.. if the field is in a frame inside the page, how do I get hold of the id and disable it in that case..because right now, no matter what I try, jqyer, javascript and so many of these possible solutions..it does not disable the control at all.. – ZVenue May 17 '12 at 18:02
Just so I am understanding, you have a page that has an iframe, and you are trying to disable a textbox within the iframe from the parent page.? – Josh Mein May 17 '12 at 18:03
I dont know that.. its in a frame.. or not.. this should be simple to fix and no matter what I try its not working.. makes me think that the control is not straightforward on the page.. may be its not finding the id if I do it this way.. – ZVenue May 17 '12 at 18:10
I think we need to see more of your html to really be able to help you. – Josh Mein May 17 '12 at 18:12
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11398/discussion-between-zvenue-and-josh-mein) – ZVenue May 17 '12 at 18:23
I am sorry.. I cant seem to connect to chat due to browser policy here.. you gmail? my id is ezboy4@gmail.com.. there is gmail chat. – ZVenue May 17 '12 at 18:25

score 1 · Answer 2 · answered May 17 '12 at 17:50

1

You tagged Jquery, so I suppose I can provide a jquery solution:

if (some_condition)
{
  $('#_ctl21_m_txtTemp').attr('disabled','disabled');
}

answered May 17 '12 at 17:50

allaire

5,995
3
41
56

I tried this.. but does not work for me.. a alert before the jquery line works showing me its getting into the if statement. but the jquery line does not work.. – ZVenue May 17 '12 at 17:55

score 0 · Answer 3 · answered May 17 '12 at 17:52

0

if you're using jQuery you can do

$('#<%= txtTemp.ClientID %>').attr("disabled", "disabled");

This ensures you get the right client id in case you move the textbox around.

answered May 17 '12 at 17:52

tedski

2,271
3
27
48

score 0 · Answer 4 · answered May 17 '12 at 17:52

0

With jQuery, I wouldn't use document.getElementById, that totally not the point

textBoxTemp = $('#_ctl21_m_txtTemp'); // weird name, by the way
textBoxTemp.attr('disabled','disabled');

answered May 17 '12 at 17:52

ClemKeirua

539
3
9

1

it's the generated name since it's a server control – tedski May 17 '12 at 17:53

score 0 · Answer 5 · answered May 17 '12 at 17:54

0

according to http://www.w3schools.com/tags/att_input_disabled.asp

the syntax should be

textBoxTemp.disabled="disabled"

you could give that a try.

answered May 17 '12 at 17:54

GreenGiant

491
1
4
13

score 0 · Answer 6 · answered May 17 '12 at 17:55

0

I can't tell if you're wanting this in jQuery or plain old Javascript, but here it is in both:

Javascript

(you're probably looking for the readonly attribute instead of disabled)

var textBoxTemp = document.getElementById('_ctl21_m_txtTemp');
textBoxTemp.readonly = true;

jQuery

$('#_ctl21_m_txtTemp').attr('readonly',true);

answered May 17 '12 at 17:55

Benjamin Oman

1,654
1
17
19

tried both.. it does not seem to work.. I am suspecting the problem lies somewhere else.. if the field is in a frame inside the page, how do I get hold of the id and disable it in that case..because right now, no matter what I try, jqyer, javascript and so many of these possible solutions..it does not disable the control at all.. – ZVenue May 17 '12 at 18:00

Control a text box using javascript

6 Answers6