www.webdeveloper.com
Results 1 to 5 of 5

Thread: popup alert on selecting a checkbox

  1. #1
    Join Date
    Jul 2010
    Posts
    11

    popup alert on selecting a checkbox

    I want to display a Popup alert if select all checkbox is selected and number of rows in the grid are more than the number of check boxes selected. This code does that but it does on the second click on the select all check box, not on the first click. Please suggest correction:
    Code:
    <script type="text/javascript">
        var TotalChkBx;
        var Counter;
    
        window.onload = function () {
            //Get total no. of CheckBoxes in side the GridView.
            TotalChkBx = parseInt('<%= this.gvConcurrentCases.Rows.Count %>');
    
            //Get total no. of checked CheckBoxes in side the GridView.
            Counter = 0;
        }
    
        function HeaderClick(CheckBox) {
            //Get target base & child control.
            var TargetBaseControl =
           document.getElementById('<%= this.gvConcurrentCases.ClientID %>');
            var TargetChildControl = "CheckBoxMerge";
    
            //Get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName("input");
    
            //Checked/Unchecked all the checkBoxes in side the GridView.
            for (var n = 0; n < Inputs.length; ++n)
                if (Inputs[n].type == 'checkbox' &&
                    Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
                    Inputs[n].checked = CheckBox.checked;
           if (Counter < parseInt('<%= this.gvConcurrentCases.Rows.Count %>'))
              alert('All concurrent cases have not been signed out.')     
            
             
            //Reset Counter
            Counter = CheckBox.checked ? TotalChkBx : 0;
            
        }

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    First please confirm the event you are using to detect the checkbox?

    It needs to be onclick not onchange.

  3. #3
    Join Date
    Jul 2010
    Posts
    11
    I am using onclick.
    Code:
    <asp:GridView ID="gvConcurrentCases" runat="server"
                EmptyDataText="No Concurrent cases Found"  
            AutoGenerateColumns="False" EnableViewState = "true" HeaderStyle-Height = "20" RowStyle-Height = "20">
            <Columns>
             <asp:TemplateField ItemStyle-HorizontalAlign ="Center" ItemStyle-VerticalAlign = "Middle" >
                    <ItemTemplate  >
                            <asp:CheckBox ID="CheckBoxMerge" runat="server" Enabled="true"  />
                    </ItemTemplate>                
                    <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                    <HeaderTemplate >
                        <asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
                    </HeaderTemplate>
                </asp:TemplateField>
            <asp:TemplateField HeaderText="Case No.">
                    <ItemTemplate >
                    <asp:Label ID="LblCaseNo" runat="server" Text='<&#37;# Eval("CaseNo") %>' visible="false"></asp:Label>  
                  <a class="link_Concurrent" href='details.aspx?caseno=<%# Eval("CaseNo") %>&ai=<%# Request.QueryString["ai"] %>&pi=<%# Request.QueryString["pi"] %>&ci=<%# Request.QueryString["ci"] %>'>
                    <%# Eval("CaseNo") %>
                    </a>
                    </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField HeaderText="Case Type" DataField="CaseTypeName"/>
            <asp:TemplateField HeaderText="Accession Date" ItemStyle-Height = "20">
                <ItemTemplate>
                    <%# completedDateAndStep(DataBinder.Eval(Container.DataItem, "CreatedDate").ToString(), Eval("StepName").ToString())%>
                </ItemTemplate>
            </asp:TemplateField><asp:TemplateField HeaderText="Completed Date">
                <ItemTemplate>
                    <%# completedDateAndStep(DataBinder.Eval(Container.DataItem, "CompletedDate").ToString(), Eval("StepName").ToString())%>
                    <asp:Label ID="CompletedStatus" runat="server" Text='<%# Eval("StepName") %>' visible="false"></asp:Label>  
                </ItemTemplate>
            </asp:TemplateField>        
            <asp:TemplateField HeaderText="Note">
                <ItemTemplate>
                
                </ItemTemplate>
            </asp:TemplateField>
            
            </Columns>
            </asp:GridView>       
    
        <asp:Label ID="Label1" runat="server" ></asp:Label><br />
        <asp:Button ID="MergeReports" runat="server" Text="Batch Save Reports" OnClick="MergeReportFiles" />

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    Try an alert as the first statement inside HeaderClick, then you'll know if it's actually being called the first time.
    If it isn't, try removing the javascript: in the onclick handler.

  5. #5
    Join Date
    Jul 2010
    Posts
    11

    alert only if checbox is clicked to check on on uncheck

    This javascript code gives me the alert when I click on the header checkbox to select all. What can I change to get this alert only if header check box is clicked to check and not when it is clicked to uncheck.

    Thanks.


    HTML Code:
    <script type="text/javascript">
        var TotalChkBx;
        var Counter;
        var ctrChecked;
    
        window.onload = function () {
            //Get total no. of CheckBoxes in side the GridView.
            TotalChkBx = parseInt('<%= this.gvConcurrentCases.Rows.Count %>');
    
            //Get total no. of checked CheckBoxes in side the GridView.
            Counter = 0;
            ctrChecked = (parseInt('<%= this.Label1.Text %>'));
        }
    
        function HeaderClick(CheckBox) {
            //Get target base & child control.
            var TargetBaseControl =
           document.getElementById('<%= this.gvConcurrentCases.ClientID %>');
            var TargetChildControl = "CheckBoxMerge";
    
            //Get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName("input");
    
            //Checked/Unchecked all the checkBoxes in side the GridView.
            for (var n = 0; n < Inputs.length; ++n)
                if (Inputs[n].type == 'checkbox' &&
                    Inputs[n].id.indexOf(TargetChildControl, 0) >= 0) {
                    Inputs[n].checked = CheckBox.checked; 
                }
                //Reset Counter
                //alert('ctrChecked' + ctrChecked + '   Row# = ' + (parseInt('<%= this.gvConcurrentCases.Rows.Count %>')));
    
                if (ctrChecked < (parseInt('<%= this.gvConcurrentCases.Rows.Count %>')))
                    alert('All concurrent cases have not been signed out.');                
            Counter = CheckBox.checked ? TotalChkBx : 0;
        }
    
        function ChildClick(CheckBox, HCheckBox) {
            //get target control.
            var HeaderCheckBox = document.getElementById(HCheckBox);
    
            //Modifiy Counter; 
            if (CheckBox.checked && Counter < TotalChkBx)
                Counter++;
            else if (Counter > 0)
                Counter--;
    
            //Change state of the header CheckBox.
            if (Counter < TotalChkBx)
                HeaderCheckBox.checked = false;
            else if (Counter == TotalChkBx)
                HeaderCheckBox.checked = true;
        }
    </script>
    
     <asp:GridView ID="gvConcurrentCases" runat="server"
                EmptyDataText="No Concurrent cases Found"   
            AutoGenerateColumns="False" EnableViewState = "true"  HeaderStyle-Height = "20" RowStyle-Height = "20"
            RowStyle-CssClass = '<% Eval("CaseNo") == pt_caseNo.Text. ? "css_Blue" : "css_White"  %>'>
            <Columns>
             <asp:TemplateField >
                    <ItemTemplate >
                            <asp:CheckBox ID="CheckBoxMerge" runat="server" Enabled="true" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                    <HeaderTemplate >
                        [B]<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />[/B]
                    </HeaderTemplate>
                </asp:TemplateField>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles