SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Check to see if atleast one of the check boxes is checked using javascript

    Hello Folks,

    I have 7 or 8 checkboxes. When a user clicks on a button, I want to check to see if atleast one of the checkboxes is checked. Otherwise I want to alert the user to check a box.


    Code:
    <asp:CheckBox ID="CheckBoxAll" runat="server" Text="Select All"  />
                    <asp:CheckBoxList ID="CheckBoxListRuns" runat="server" 
                        ForeColor="Black" BorderColor="#3333CC">
                      <asp:ListItem>Run today</asp:ListItem>
                      <asp:ListItem>Run tomorrow</asp:ListItem>
                      <asp:ListItem>Never Run</asp:ListItem>
                      </asp:CheckBoxList>
    So far this is the code I wrote. Any further help from here is greatly appreciated. Thanks
    Code:
    function check() {
                     
                     var checkboxCollection = document.getElementById('<%=CheckBoxListRuns.ClientID %>').getElementsByTagName('input');
    
                     for (var i = 0; i < checkboxCollection.length; i++) {
                         //Here I need to put a validation check.                     
                     }
    }
                 }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by JasonsmithOO1 View Post
    So far this is the code I wrote. Any further help from here is greatly appreciated.
    What happens when you find that a checkbox is checked? Everything is okay and the function can return without taking any further action.

    So inside of the for loop you can have this:

    Code javascript:
    if (checkboxCollection[i].checked) {
        return;
    }

    After the for loop is finished, that is where you will end up if none of the checkboxes are found to be checked, so you can alert the user there.

    Code javascript:
    window.alert('Please select at least one checkbox.');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Now, eventhough one checkbox is checked, I get the alert message saying "click atleast one checkbox". I am sure I am doing something wrong in the return statuement

    Code:
    function PerformChecks() {
                     
                     var vartextboxEOM = document.getElementById('<%= TextBoxPeriod.ClientID%>').value;
    
                     var vardropdownEOM = document.getElementById('<%= DropDownListEOMDates.ClientID %>');
    
                     //This is first check
                     if (vartextboxEOM == "" && vardropdownEOM.style.visibility == "hidden") {
                         alert("Enter/Pick the date from textbox");
                     }
                     else { //This is second check
    
                         var checkboxCollection = document.getElementById('<%=CheckBoxListInstruments.ClientID %>').getElementsByTagName('input');
    
                         for (var i = 0; i < checkboxCollection.length; i++) {
                     
                         if (checkboxCollection[i].checked) 
                            return;
                         else
                             alert("Please select at least one checkbox");
                             return;
                        }
                     }

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by JasonsmithOO1 View Post
    I am sure I am doing something wrong in the return statuement
    Please go back and read what I said about "After the for loop is finished"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it Paul. Let me try

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I did exactly the way you said. Now the I get the alert message saying fine. But it still does it's default behaviour.

    Basically I have handled two click events on this button. onclick and OnClientClick events.
    First OnClientClick is being fired. that is where the Performchecks javascript function is launched. Though the alert message is showing up, the server event (ButtonRun_Click) is also being launched after OnClientClick. I need to stop this server event in case I get the alert message from OnClientClick.

    Code:
     <asp:Button ID="ButtonRun" runat="server" Text="Go" 
                        onclick="ButtonRun_Click" OnClientClick="PerformChecks();" Width="57px"  />

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by JasonsmithOO1 View Post
    I did exactly the way you said.
    Sadly no. You are doing it while you are still in the loop. as an else part of the if statement.

    You need to instead show the alert after the for loop is finished, since that is where you will end up if none of the checkboxes are found to be checked.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I am doing alert after for loop as shown below:

    Code:
    function PerformChecks() {
                     
                     var vartextboxEOM = document.getElementById('<%= TextBoxPeriod.ClientID%>').value;
    
                     var vardropdownEOM = document.getElementById('<%= DropDownListEOMDates.ClientID %>');
    
                     //This is first check
                     if (vartextboxEOM == "" && vardropdownEOM.style.visibility == "hidden") {
                         alert("Enter/Pick the date from textbox");
                     }
                     
                     else { //This is second check
    
                         var checkboxCollection = document.getElementById('<%=CheckBoxListInstruments.ClientID %>').getElementsByTagName('input');
    
                         for (var i = 0; i < checkboxCollection.length; i++) {
    
                             if (checkboxCollection[i].checked)
                                 return;
                         }
    
                         window.alert("Please check atleast one checkbox");
                        
                     }                  
                 }

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by JasonsmithOO1 View Post
    Basically I have handled two click events on this button. onclick and OnClientClick events.
    First OnClientClick is being fired. that is where the Performchecks javascript function is launched. Though the alert message is showing up, the server event (ButtonRun_Click) is also being launched after OnClientClick. I need to stop this server event in case I get the alert message from OnClientClick.
    It's good to know we've got the previous issue sorted out.

    I don't know how to deal with ASP issues, so the ASP forum will be able to help you when dealing with things like server events.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul for your help. I will ask someone in ASP forum how to stop the server event to be fired.

    Thanks again


Bookmarks

Posting Permissions

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