asked on

Java Script to disable all dropdown boxes on page (exclude other controls)

I am looking for a simple way to reference all the dropdown controls on a page, and disable them when a particular text box's text is changed. My page has other elements, such as text boxes and radio selectors, but I do not want them to be affected.

In other words, an OnClick event for a particular text box, calls a routine which disables all the dropdown boxes.

This is what I was thinking...
 
function disabledropdowns()
{
document.getElementByType("dropdown").disabled=true
}

Open in new window

ASKER CERTIFIED SOLUTION

petiex

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

andrejonker

ASKER

Maybe it is lack of sleep, but I don't see why nothing happens... I called the above as follows:

<asp:TextBox runat="server" id="CustomerName" width="500px" onchange="javascript: disabledropdowns()">ReplaceWithCustomerName</asp:TextBox>

And in my page head, I have:

<script language="javascript" type="text/javascript">
function disabledropdowns()
{
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++)
{
selects[i].disabled = true;
}
}
</script>

petiex

What does the HTML rendered from your ASP code look like when you view-source on the rendered page?
I think that with ASP, you may need to add the onchange attribute programmatically as described here: http://www.aspdev.org/articles/asp.net-javascript-add.attributes/

andrejonker

ASKER

Changed it to:
asp:TextBox runat="server" id="CustomerName" width="500px" onchange="disabledropdowns()">ReplaceWithCustomerName</asp:TextBox>

and now the HTML result looks like:
<input name="CustomerName" type="text" value="ReplaceWithCustomerName" id="CustomerName" class="field_input" onchange="disabledropdowns()" style="width:500px;" />