onclick attribute for CheckBox
Messages   Related Types
This message was discovered on ASPFriends.com 'aspngcontrolscs' list.


Andy Smith
i want to create my own clientside onclick handler for a =
WebControls.CheckBox in a composite control.

so i code:
checkBox.Attributes["onclick"] =3D "return false;";

but the rendered html has the onclick attribute in a span tag =
surrounding the input tag. this is certainly NOT the desired behavior.

how do I force the onclick handler into the input tag?

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

Reply to this message...
 
    
Glasgow, Scott # PHX
I can't look at my code right now, but I *think* I did
checkBox.Attributes.Add("OnClick","javascript: return false;");

Sorry if I'm wrong.

-----Original Message-----
From: Andy Smith [mailto:Click here to reveal e-mail address]
Sent: Monday, July 01, 2002 12:13 PM
To: aspngcontrolscs
Subject: [aspngcontrolscs] onclick attribute for CheckBox

i want to create my own clientside onclick handler for a
WebControls.CheckBox in a composite control.

so i code:
checkBox.Attributes["onclick"] = "return false;";

but the rendered html has the onclick attribute in a span tag surrounding
the input tag. this is certainly NOT the desired behavior.

how do I force the onclick handler into the input tag?

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

| [aspngcontrolscs] member Click here to reveal e-mail address = YOUR ID
| http://www.asplists.com/asplists/aspngcontrolscs.asp = JOIN/QUIT
| http://www.asplists.com/search = SEARCH Archives

Reply to this message...
 
    
Andy Smith
that method of setting the Attribute has no change on the behavior.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

Reply to this message...
 
    
Daniel Chavez
uses checkBox.Attibutes.Add("Onclick","javascript:......... here code");

regards
----- Original Message -----
From: Andy Smith
To: aspngcontrolscs
Sent: Monday, July 01, 2002 2:12 PM
Subject: [aspngcontrolscs] onclick attribute for CheckBox

i want to create my own clientside onclick handler for a WebControls.CheckBox in a composite control.

so i code:
checkBox.Attributes["onclick"] = "return false;";

but the rendered html has the onclick attribute in a span tag surrounding the input tag. this is certainly NOT the desired behavior.

how do I force the onclick handler into the input tag?
Reply to this message...
 
    
Andy Smith
that method of applying the attribute has the same behavior as the method i had in my original mail.

some rendering logic for the WebControls.CheckBox makes it put the onclick handler in a span tag which surrounds the input tag.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

-----Original Message-----
From: Daniel Chavez [mailto:Click here to reveal e-mail address]
Sent: Monday, July 01, 2002 1:54 PM
To: aspngcontrolscs
Subject: [aspngcontrolscs] Re: onclick attribute for CheckBox

uses checkBox.Attibutes.Add("Onclick","javascript:......... here code");

regards

----- Original Message -----
From: Andy <mailto:Click here to reveal e-mail address> Smith
To: aspngcontrolscs <mailto:Click here to reveal e-mail address>
Sent: Monday, July 01, 2002 2:12 PM
Subject: [aspngcontrolscs] onclick attribute for CheckBox

i want to create my own clientside onclick handler for a WebControls.CheckBox in a composite control.

so i code:
checkBox.Attributes["onclick"] = "return false;";

but the rendered html has the onclick attribute in a span tag surrounding the input tag. this is certainly NOT the desired behavior.

how do I force the onclick handler into the input tag?

| [aspngcontrolscs] member Click here to reveal e-mail address = YOUR ID | http://www.asplists.com/asplists/aspngcontrolscs.asp = JOIN/QUIT | http://www.asplists.com/search = SEARCH Archives
Reply to this message...
 
    
Glasgow, Scott # PHX
Ok Andy, looked at my code. I had since changed to radio buttons but changed
back to experiment. When I first did the change, I got the same results you
did. I commented out my original Attributes.Add and placed a new one ABOVE
the CheckBox.Text = statement and it worked. eg: (ignore naming of this
stuff ;)) For some reason, if I move the Attributes.Add below the .Text =
statement, you get the SPAN issue.

            CheckBox rbBillable = new CheckBox();
            if(bNew)
                rbBillable.Checked = true;
            else
                rbBillable.Checked = (sps.IsBillable);
            if(!bEdit&&!bNew)
                rbBillable.Enabled = false;
            rbBillable.ID = "true";
            rbBillable.Attributes.Add("OnClick", "javascript:
alert('boo');");
            rbBillable.Text = "<B>Yes</B>";

-----Original Message-----
From: Andy Smith [mailto:Click here to reveal e-mail address]
Sent: Monday, July 01, 2002 12:43 PM
To: aspngcontrolscs
Subject: [aspngcontrolscs] RE: onclick attribute for CheckBox

that method of setting the Attribute has no change on the behavior.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

| [aspngcontrolscs] member Click here to reveal e-mail address = YOUR ID
| http://www.asplists.com/asplists/aspngcontrolscs.asp = JOIN/QUIT
| http://www.asplists.com/search = SEARCH Archives

Reply to this message...
 
    
Andy Smith
hrm, that doesn't work for me.
here is some example code...

<script runat=3D"server" language=3D"c#">
    protected void Page_Load( Object sender, EventArgs e ) {
        webCheckBox1.Attributes["onclick"] =3D "return false;";
    =09
        CheckBox webCheckbox2 =3D new CheckBox();
        webCheckbox2.Checked =3D false;
        webCheckbox2.Enabled =3D false;
        webCheckbox2.ID =3D "webCheckbox2";
        webCheckbox2.Attributes.Add("OnClick", "javascript: alert('boo');");

        webCheckbox2.Text =3D "";
        myForm.Controls.Add( webCheckbox2 );
    }
</script>
<form runat=3D"server" id=3D"myForm" >
<asp:CheckBox runat=3D"server" id=3D"webCheckBox1" />

</form>

neither checkbox puts the onclick into the input tag for me.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

Reply to this message...
 
    
Glasgow, Scott # PHX
Odd. Ok, let me play around with your code sample and see if I can figure
something out. I swear the code I sent works for me. :) I have a text input
box that gets displayed if the box is unchecked (previous version). Of
course, due to user needs/requirements, I had to change to two radio boxes.

I'll let you know if I come up with something. The one difference I do have
is that all of my code is in code behind which could be making the
difference.

-----Original Message-----
From: Andy Smith [mailto:Click here to reveal e-mail address]
Sent: Monday, July 01, 2002 1:28 PM
To: aspngcontrolscs
Subject: [aspngcontrolscs] RE: onclick attribute for CheckBox

hrm, that doesn't work for me.
here is some example code...

<script runat="server" language="c#">
    protected void Page_Load( Object sender, EventArgs e ) {
        webCheckBox1.Attributes["onclick"] = "return false;";
        
        CheckBox webCheckbox2 = new CheckBox();
        webCheckbox2.Checked = false;
        webCheckbox2.Enabled = false;
        webCheckbox2.ID = "webCheckbox2";
        webCheckbox2.Attributes.Add("OnClick", "javascript:
alert('boo');");

        webCheckbox2.Text = "";
        myForm.Controls.Add( webCheckbox2 );
    }
</script>
<form runat="server" id="myForm" >
<asp:CheckBox runat="server" id="webCheckBox1" />

</form>

neither checkbox puts the onclick into the input tag for me.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

| [aspngcontrolscs] member Click here to reveal e-mail address = YOUR ID
| http://www.asplists.com/asplists/aspngcontrolscs.asp = JOIN/QUIT
| http://www.asplists.com/search = SEARCH Archives

Reply to this message...
 
    
Glasgow, Scott # PHX
OK..slightly modifed and just an aspx page. Click both returns the alert.
Question, what is the return false suppose to do? It doesn't look like it
auto submits.

<script runat="server" language="c#">
    protected void Page_Load( Object sender, EventArgs e ) {
        webCheckBox1.Attributes.Add("onclick", "javascript:
alert('Hello');return false;");
        
        CheckBox webCheckbox2 = new CheckBox();
        webCheckbox2.Checked = false;
        webCheckbox2.Enabled = true;
        webCheckbox2.ID = "webCheckbox2";
        webCheckbox2.Attributes.Add("OnClick", "javascript:
alert('boo');");

        webCheckbox2.Text = "";
        myForm.Controls.Add( webCheckbox2 );
    }
</script>
<HTML><HEAD><TITLE>Test</TITLE></HEAD><BODY>
<form runat="server" id="myForm" >
<asp:CheckBox runat="server" id="webCheckBox1" />

</form>
</BODY></HTML>

-----Original Message-----
From: Andy Smith [mailto:Click here to reveal e-mail address]
Sent: Monday, July 01, 2002 1:28 PM
To: aspngcontrolscs
Subject: [aspngcontrolscs] RE: onclick attribute for CheckBox

hrm, that doesn't work for me.
here is some example code...

<script runat="server" language="c#">
    protected void Page_Load( Object sender, EventArgs e ) {
        webCheckBox1.Attributes["onclick"] = "return false;";
        
        CheckBox webCheckbox2 = new CheckBox();
        webCheckbox2.Checked = false;
        webCheckbox2.Enabled = false;
        webCheckbox2.ID = "webCheckbox2";
        webCheckbox2.Attributes.Add("OnClick", "javascript:
alert('boo');");

        webCheckbox2.Text = "";
        myForm.Controls.Add( webCheckbox2 );
    }
</script>
<form runat="server" id="myForm" >
<asp:CheckBox runat="server" id="webCheckBox1" />

</form>

neither checkbox puts the onclick into the input tag for me.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

| [aspngcontrolscs] member Click here to reveal e-mail address = YOUR ID
| http://www.asplists.com/asplists/aspngcontrolscs.asp = JOIN/QUIT
| http://www.asplists.com/search = SEARCH Archives

Reply to this message...
 
    
Andy Smith

look at the generated html for that code.
the onclick attribute is on a span surrounding the input tag.
the alert works only because the click event bubbles up the DOM into the =
surrounding span tag.

if it did indeed work, you would know what "return false" does :)
a "return false" in the onclick of a checkbox will cancel the click =
before the checkbox changes its status. it effectively makes the =
checkbox readonly.
the reason i want to do this is because many browsers completely ignore =
both the "disabled" and "readonly" attributes on the checkbox control. ( =
netscape4, ahem )

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

Reply to this message...
 
    
Glasgow, Scott # PHX
Andy,

Holy cow! You're right....the same is true for radio buttons. I hadn't
noticed that before. Thus, I wasn't thinking about the return false either.
I apologize! Does your design require it to be server side? If not, the
System.Web.UI.HtmlControls.HtmlInputCheckBox does not have this bug (yes I
verified via view source and checking it and having it return false :)).

This really bites that both the CheckBox and RadioButton server controls
have this. I suppose a workaround (albeit not the best) would be to set the
checked property to false. Seems silly a SPAN tag is being used. Sorry for
wasting so much of your time.

-----Original Message-----
From: Andy Smith [mailto:Click here to reveal e-mail address]
Sent: Monday, July 01, 2002 1:56 PM
To: aspngcontrolscs
Subject: [aspngcontrolscs] RE: onclick attribute for CheckBox

look at the generated html for that code.
the onclick attribute is on a span surrounding the input tag.
the alert works only because the click event bubbles up the DOM into the
surrounding span tag.

if it did indeed work, you would know what "return false" does :)
a "return false" in the onclick of a checkbox will cancel the click before
the checkbox changes its status. it effectively makes the checkbox readonly.
the reason i want to do this is because many browsers completely ignore both
the "disabled" and "readonly" attributes on the checkbox control. (
netscape4, ahem )

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

| [aspngcontrolscs] member Click here to reveal e-mail address = YOUR ID
| http://www.asplists.com/asplists/aspngcontrolscs.asp = JOIN/QUIT
| http://www.asplists.com/search = SEARCH Archives

Reply to this message...
 
    
Andy Smith
yes, I had discovered that the HtmlInputCheckBox has the expected =
behavior.
but the CheckBox was one of many possible controls to be referenced, and =
I had hoped I could set the reference as a WebControl, but this means =
I'll have to use just Control.

maybe somebody at MS could tell us all the point behind putting the =
attributes in a span tag? I don't get it.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

Reply to this message...
 
    
Andy Smith
well... I got fed up and deciphered the IL in the Render method of the =
WebControls.CheckBox...

not only is the span tag not a "bug", it's an explicitly created design.
if the CheckBox has Enabled set to false, a ToolTip set, or ANY =
attribute besides "value", then the control will create a span tag =
around the input to put those values.

after some reflection on "why the hell would they do this?!??", I came =
to the conclusion that they wanted to make sure that the <label> which =
holds the text value would inherit the same style and attributes as the =
checkbox from a common parent. This design works correctly in the =
general case scenario, and would cause lots of confusion, i think, if it =
didn't do this.

the HtmlInputCheckBox doesn't exhibit this behavior because it has no =
builtin associated label.

at the end of the day... I understand the issues involved... and respect =
the decision.

however, the fact that RenderInputTag and RenderLabel are internal =
really angers me.
those should be protected virtual methods to allow for customization.

for those who want/need to use CheckBox or RadioButton, but want more =
control over which attributes go to which tag, I'm going to suggest =
subclassing the CheckBox and RadioButton, explicitly add the properties =
you want on specific tags as first class properties of the control, =
override Render to do the same as the standard, but with your own =
versions of RenderInputTag and RenderLabel.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

Reply to this message...
 
    
Jeffrey Widmer
Andy,
How do you do this:
[Original message clipped]

Thanks,
-Jeff

---------- Original Message ----------------------------------
From: "Andy Smith" <Click here to reveal e-mail address>
Reply-To: "aspngcontrolscs" <Click here to reveal e-mail address>
Date: Tue, 2 Jul 2002 12:05:25 -0600

Reply to this message...
 
    
Andy Smith
well.. you have a couple choices.

1)
learn IL from the many books and whitepapers available.
use ILDASM ( an SDK tool ) to examine the IL of any class.

2)=20
download Anakrino ( link on this page =
http://www.gotdotnet.com/team/csharp/thirdparty/default.aspx
under "Decompilers" )
point it at the class you want to see and read the ( rather mangled ) c# =
code.

at first i used anakrino exclusively, but sometimes what it creates is =
less readable than the IL, so it's good to know at least a little of =
that.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

Reply to this message...
 
    
Jimmy Harris
This is a pretty inflexible design from MS. It makes something as simple as tallying a total, client side, from a list of values tied to checkboxes extremely difficult to do. errrrr....

--------------------------------
From: Jimmy Harris
Reply to this message...
 
 
System.EventArgs
System.Web.UI.HtmlControls.HtmlInputCheckBox
System.Web.UI.WebControls.CheckBox
System.Web.UI.WebControls.RadioButton
System.Web.UI.WebControls.WebControl
System.Windows.Forms.CheckBox
System.Windows.Forms.RadioButton
System.Windows.Forms.ToolTip




Ad
MBR BootFX
Best-of-breed application framework for .NET projects, developed by Matthew Baxter-Reynolds and MBR IT
 
 Copyright © Matthew Baxter-Reynolds 2001-2008. '.NET 247 Software Development Services' is a trading style of MBR IT Solutions Ltd.
Contact Us - Terms of Use - Privacy Policy - www.dotnet247.com