OnClick vs OnClientClick for an asp CheckBox

Question

Does anyone know why a client-side javascript handler for asp CheckBox needs to be an OnClick    attribute rather than an OnClientClick    attribute  as for asp Button   For example  this works     lt asp CheckBox runat  server  OnClick  alert this checked      gt    and this doesn t  no error     lt asp CheckBox runat  server  OnClientClick  alert this checked      gt    but this works     lt asp Button runat  server  OnClientClick  alert  Hi       gt    and this doesn t  compile time error     lt asp Button runat  server  OnClick  alert  hi       gt     I know what Button OnClick is for  I m wondering why CheckBox doesn t work the same way

User · Answer

You can assign function to all checkboxes then ask for confirmation inside of it. If they choose yes, checkbox is allowed to be changed if no it remains unchanged.

In my case I am also using ASP .Net checkbox inside a repeater (or grid) with Autopostback="True" attribute, so on server side I need to compare the value submitted vs what's currently in db in order to know what confirmation value they chose and update db only if it was "yes".

$(document).ready(function () {
    $('input[type=checkbox]').click(function(){                
        var areYouSure = confirm('Are you sure you want make this change?');
        if (areYouSure) {
            $(this).prop('checked', this.checked);
        } else {
            $(this).prop('checked', !this.checked);
        }
    });
}); 


<asp:CheckBox ID="chk" AutoPostBack="true" onCheckedChanged="chk_SelectedIndexChanged" runat="server" Checked='<%#Eval("FinancialAid") %>' />

protected void chk_SelectedIndexChanged(Object sender, EventArgs e)
{
    using (myDataContext db = new myDataDataContext())
    {
        CheckBox chk = (CheckBox)sender;
        RepeaterItem row = (RepeaterItem) chk.NamingContainer;            
        var studentID = ((Label) row.FindControl("lblID")).Text;
        var z = (from b in db.StudentApplicants
        where b.StudentID == studentID
        select b).FirstOrDefault();                
        if(chk != null && chk.Checked != z.FinancialAid){
            z.FinancialAid = chk.Checked;                
            z.ModifiedDate = DateTime.Now;
            db.SubmitChanges();
            BindGrid();
        }
        gvData.DataBind();
    }
}

User · Answer

You are right this is inconsistent   What is happening is that CheckBox doesn t HAVE an server-side OnClick event  so your markup gets rendered to the browser   http   msdn microsoft com en-us library system web ui webcontrols checkbox events aspx  Whereas Button does have a OnClick - so ASP NET expects a reference to an event in your OnClick markup

User · Answer

For those of you who got here looking for the server-side OnClick handler it is OnCheckedChanged

User · Answer

Asp net CheckBox is not support method OnClientClick   If you want to add some javascript event to asp CheckBox you have to add related attributes on  Pre Render  or on  Page Load  events in server code   C         private void Page Load object sender  EventArgs e                SomeCheckBoxId Attributes  onclick      MyJavaScriptMethod this             Note  Ensure you don t set AutoEventWireup  false  in page header   VB        Private Sub Page Load ByVal sender As Object  ByVal e As System EventArgs  Handles MyBase Load         SomeCheckBoxId Attributes  onclick      MyJavaScriptMethod this        End Sub

User · Answer

That is very weird  I checked the CheckBox documentation page which reads   lt asp CheckBox id  CheckBox1        AutoPostBack  True False       Text  Label       TextAlign  Right Left       Checked  True False       OnCheckedChanged  OnCheckedChangedMethod       runat  server   gt    As you can see  there is no OnClick or OnClientClick attributes defined    Keeping this in mind  I think this is what is happening    When you do this    lt asp CheckBox runat  server  OnClick  alert this checked      gt    ASP NET doesn t modify the OnClick attribute and renders it as is on the browser  It would be rendered as      lt input type  checkbox  OnClick  alert this checked      gt    Obviously  a browser can understand  OnClick  and puts an alert    And in this scenario   lt asp CheckBox runat  server  OnClientClick  alert this checked      gt    Again  ASP NET won t change the OnClientClick attribute and will render it as   lt input type  checkbox  OnClientClick  alert this checked      gt    As browser won t understand OnClientClick nothing will happen  It also won t raise any error as it is just another attribute   You can confirm above by looking at the rendered HTML    And yes  this is not intuitive at all

User · Answer

I was cleaning up warnings and messages and see that VS does warn about it  Validation  ASP Net   Attribute  OnClick  is not a valid attribute of element  CheckBox   Use the html input control to specify a client side handler and then you won t get the extra span tag and the two elements

User · Answer

Because they are two different kinds of controls      You see  your web browser doesn t know about server side programming   it only knows about it s own DOM and the event models that it uses     And for click events of objects rendered to it   You should examine the final markup that is actually sent to the browser from ASP Net to see the differences your self    lt asp CheckBox runat  server  OnClick  alert this checked      gt    renders to    lt input type  check  OnClick  alert this checked      gt    and    lt asp CheckBox runat  server  OnClientClick  alert this checked      gt    renders to   lt input type  check  OnClientClick  alert this checked      gt    Now  as near as i can recall  there are no browsers anywhere that support the  OnClientClick  event in their DOM     When in doubt  always view the source of the output as it is sent to the browser    there s a whole world of debug information that you can see

User · Answer

You can do the tag like this    lt asp CheckBox runat  server  ID  ckRouteNow  Text  Send Now  OnClick  checkchanged this     gt    The  checked property in the called JavaScript will be correct   the current state of the checkbox     function checkchanged obj          alert obj checked

User · Answer

One solution is with JQuery     document  ready      function                  mycheckboxId   click function                        here the action or function to call

[asp.net] OnClick vs OnClientClick for an asp:CheckBox?

Examples related to asp.net

Examples related to javascript

Examples related to checkbox

Examples related to onclick

Examples related to onclientclick