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
– web_bod, Commented May 17, 2012 at 17:52
<td style="height: 19px"> <input name="_ctl21:m_m_txtTemp" type="text" id="_ctl21_m_m_txtTemp" class="inputNormalRequired" style="width: 32px;" size="1" value="100" /> </td> — ZVenue
– ZVenue, Commented May 17, 2012 at 18:04

Community · Accepted Answer · 2017-05-23 11:56:29Z

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, 2017 at 11:56

CommunityBot

11 silver badge

answered May 17, 2012 at 17:50

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

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

6 Comments

ZVenue Over a year ago

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

Josh Mein Over a year ago

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

ZVenue Over a year ago

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

Josh Mein Over a year ago

I think we need to see more of your html to really be able to help you.

ZVenue Over a year ago

let us continue this discussion in chat

|

allaire · Accepted Answer · 2012-05-17 17:50:59Z

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, 2012 at 17:50

allaire

6,0453 gold badges43 silver badges56 bronze badges

1 Comment

ZVenue Over a year ago

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

tedski · Accepted Answer · 2012-05-17 17:52:17Z

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, 2012 at 17:52

tedski

2,2863 gold badges27 silver badges48 bronze badges

Comments

ClemKeirua · Accepted Answer · 2012-05-17 17:52:39Z

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, 2012 at 17:52

ClemKeirua

5043 silver badges9 bronze badges

1 Comment

tedski Over a year ago

it's the generated name since it's a server control

GreenGiant · Accepted Answer · 2012-05-17 17:54:50Z

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, 2012 at 17:54

GreenGiant

5211 gold badge4 silver badges13 bronze badges

Comments

Benjamin Oman · Accepted Answer · 2012-05-17 17:55:12Z

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, 2012 at 17:55

Benjamin Oman

1,6541 gold badge17 silver badges19 bronze badges

1 Comment

ZVenue Over a year ago

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

Collectives™ on Stack Overflow

Control a text box using javascript

6 Answers 6

6 Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related