Disable Button With Javascript

  • Thread starter Thread starter Joey
  • Start date Start date
J

Joey

Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?
 
YOu need to actually query, in code behind, to determine what the postback
event is for the control and emit the JavaScript accordingly. I am not sure
this conquers all Firefox issues, but it guarantees a proper path down the
rabbit hole even if you rename the control for some reason. I do not have a
sample for this.

If you have to go absolutely generic, you can get the control that posted
from Request["EVENTTARGET"], but this does not work with all controls.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

*************************************************
Think outside of the box!
*************************************************
 
Joey,

This code works for me. Be sure to declare your DTD as XHTML 1.1
Transitional. You may find that helps because the way the disabled
attribute was handled has changed since the HTML 3.2 spec.

<script type="text/javascript">
<!--
function disableButton(buttonId) {
if (document.all) {
var btn = document.all[buttonId; btn.disabled = 'true';
}
else {
var btn = document.getElementById(buttonId); btn.disabled = 'true';
}
}
// -->
</script>

....

<!-- After button is defined -->
<script type="text/javascript">
disableButton('ct100_ContentPlaceHolder1_btnContinue');
</script>


Brennan Stehling
http://brennan.offwhite.net/blog/
 
document.all is an IE only collection, it does not exist in the w3c
standard, so it works in ie only. use the w3c standard:

document.getElementById('ct100_ContentPlaceHolder1_btnContinue').disabled =
true;

-- bruce (sqlwork.com)
 
Can you provide a simple example as to how to query, in code behind,
for the correct id?
YOu need to actually query, in code behind, to determine what the postback
event is for the control and emit the JavaScript accordingly. I am not sure
this conquers all Firefox issues, but it guarantees a proper path down the
rabbit hole even if you rename the control for some reason. I do not have a
sample for this.

If you have to go absolutely generic, you can get the control that posted
from Request["EVENTTARGET"], but this does not work with all controls.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

*************************************************
Think outside of the box!
*************************************************
Joey said:
Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?
Click to expand...
Click to expand...
 
Okay, I changed it to...

document.getElementById('ct100_ContentPlaceHolder1_btnContinue').disabled=true

Now it still works fine in IE, and it still doesn't work in Firefox.

Any other ideas, anyone?

document.all is an IE only collection, it does not exist in the w3c
standard, so it works in ie only. use the w3c standard:

document.getElementById('ct100_ContentPlaceHolder1_btnContinue').disabled =
true;

-- bruce (sqlwork.com)

Joey said:
Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?
Click to expand...
Click to expand...
 
Okay, nevermind. I cleared the cache in Firefox, and now it works.
Thanks a lot!
Joey said:
Okay, I changed it to...

document.getElementById('ct100_ContentPlaceHolder1_btnContinue').disabled=true

Now it still works fine in IE, and it still doesn't work in Firefox.

Any other ideas, anyone?

document.all is an IE only collection, it does not exist in the w3c
standard, so it works in ie only. use the w3c standard:

document.getElementById('ct100_ContentPlaceHolder1_btnContinue').disabled =
true;

-- bruce (sqlwork.com)

Joey said:
Hello,

In my C# asp.net 2.0 application, I have a webform with a button server
control on it. The webform, like most others in the site, subscribes to
a master page. I have determined that the button always renders with an
id of "ct100_ContentPlaceHolder1_btnContinue" in both the IE and
Firefox browsers.

I created the following javascript code segment to disable it when the
page loads. I have reasons for not wanting to do this with server side
code...

document.all['ct100_ContentPlaceHolder1_btnContinue'].disabled = true;

Now, when I view this in IE, the button is disabled. But when I view it
in Firefox, it's not. Also, there are no javascript errors returned by
either browser. Also, I have already updated my browserCaps section in
web.config, if that is relevant.

Why does the button remain enabled when viewing the page with Firefox?
Click to expand...
Click to expand...
Click to expand...
 
Okay, nevermind. I cleared the cache in Firefox, and now it works.
Click to expand...

BTW, you could make your HTML more readable by giving your MasterPage(s) and
ContentPages meaningful IDs... E.g. in the code behind your MasterPage:

protected void Page_Init(object sender, EventArgs e)
{
this.ID = "MyMasterPage";
}

And then explicitly name every ContentPage in its HTML e.g.

<asp:Content ContentPlaceHolderID="MyContentPage" runat="server">
<asp:TextBox ID="MyTextBox" runat="server" />
</<asp:Content>

Then, client side, your control will ALWAYS be called
MyMasterPage_MyContentPage_MyTextBox- this makes your life massively easier
because it means you don't have to ask ASP.NET to tell you the controls'IDs,
as you already know them.

In this way, you can use client-side JavaScript to refer to your controls in
two ways:

document.aspnetForm.MyMasterPage_MyContentPage_MyTextBox

or

document.getElementById('MyMasterPage_MyContentPage_MyTextBox')

Also, don't forget that no matter what ID you give the <form> tag in your
MasterPage, ASP.NET will ALWAYS rename it to aspnetForm :-)
 
Forget that , use inline aspx code to pass the control's .ClientID property.
This is the most reliable.
 
I agree. You never know what the hiearchy will be when your pages and
controls are used. Hard-coding the names in Javascript will ensure
they break sooner or later.

What I normally do is declare Javascript variables in a static .js file
with the major of the Javascript behavior. And then with the ASP.NET
controls, I insert script blocks which set those variables.

<script ...>
var buttonId;

functions...
</script>

<!-- later from the ASP.NET control -->

<script ...>
buttonId = 'Page_Button1';
</script>

Search for RegisterScriptBlock on MSDN.

Brennan Stehling
http://brennan.offwhite.net/blog/
 
Back
Top