Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form popup when array of checkboxes are checked.

    Hello!

    I have set up a HTML form as a checklist. I wanted it to work so that when all 8 checkboxed are selected/checked, a popup message comes up on the screen. If one of the checkboxes is not checked, then nothing should happens.

    Here is what I have put together so far:


    <script language="JavaScript">

    var wbArray = new Array()
    wbArray[0]= "whiteboard1" // checkbox names
    wbArray[1]= "whiteboard2"
    wbArray[2]= "whiteboard3"
    wbArray[3]= "whiteboard4"
    wbArray[4]= "whiteboard5"
    wbArray[5]= "whiteboard6"
    wbArray[6]= "whiteboard7"
    wbArray[7]= "whiteboard8"

    function evalForm(){

    var i;
    var wbobj = document.whiteboard.wbArray[i];
    var counter = 0;

    for (i=0; i < 8; i++){
    if wbobj.value.checked {
    counter += counter +1;

    if counter = 8 {
    alert ("Congratulations, you are prepared for an effective training session using a whiteboard or flipchart!")
    }
    else
    return false;
    }
    }
    }


    I am not sure if this is correct, and where I should be putting the code (in the <head> or embedded in the form??).

    Please help,

    mmasci.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    look at this code......

    <html>
    <head>
    <script>

    function CheckIt(){
    Counter=0;
    for(i=1;i<=8;i++){
    if(document.FN["C"+i].checked)Counter+=1;
    }
    if(Counter==8)alert('hm');
    }

    </script>
    </head>
    <body>

    <form name="FN">
    <input type="checkbox" name="C1" onclick="CheckIt()">1<br>
    <input type="checkbox" name="C2" onclick="CheckIt()">2<br>
    <input type="checkbox" name="C3" onclick="CheckIt()">3<br>
    <input type="checkbox" name="C4" onclick="CheckIt()">4<br>
    <input type="checkbox" name="C5" onclick="CheckIt()">5<br>
    <input type="checkbox" name="C6" onclick="CheckIt()">6<br>
    <input type="checkbox" name="C7" onclick="CheckIt()">7<br>
    <input type="checkbox" name="C8" onclick="CheckIt()">8<br>

    </body>
    </html>


    hope this helps

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Link number of selected check boxes

    I have a truck load of Check boxes on a 5 page form. we have been using this to collate information from outstations. a request for an improvement to restrict users form selecting more than 10 check boxes just came up. I think it is too late now to redesign the forms but would rather have a script that alerted the user when he selects the 11th option. I saw an example here on the forum, but couldn't use it as my form had the same name for every check box since we dumped that on the same row in the database. how can I use id or any other means to achieve the same. in order not to dump a long code here is an example of what my code looks like.

    <html>
    <head>
    <script>

    function CheckIt(){
    Counter=0;
    for(i=1;i<=12;i++){
    if(document.FN.id["C"+i].C.checked==true)Counter+=1;
    }
    if(Counter==8)alert('hm');
    }

    </script>
    </head>
    <body>

    <form name="FN">
    <input type="checkbox" id="C1" name="C" onClick="CheckIt()" value="ON">1<br>
    <input type="checkbox" id="C2" onClick="CheckIt()" value="ON">2<br>
    <input type="checkbox" id="C3" onClick="CheckIt()" value="ON">3<br>
    <input type="checkbox" id="C4" onClick="CheckIt()" value="ON">4<br>
    <input type="checkbox" id="C5" onClick="CheckIt()" value="ON">5<br>
    <input type="checkbox" id="C6" onClick="CheckIt()" value="ON">6<br>
    <input type="checkbox" id="C7" onClick="CheckIt()" value="ON">7<br>
    <input type="checkbox" id="C8" onClick="CheckIt()" vvalue="ON">8<br>
    <input type="checkbox" id="C9" onClick="CheckIt()" value="ON">9<br>
    <input type="checkbox" id="C10" onClick="CheckIt()" value="ON">10<br>
    <input type="checkbox" id="C11" onClick="CheckIt()" value="ON">11<br>
    <input type="checkbox" id="C12" onClick="CheckIt()" value="ON">12<p>
    <input type="submit" value="Submit" name="B1"><br>

    </p>

    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved - Limiting the Number of Checked boxes!

    I took another look at the code and finally found out what I was doing wrong.

    <html>
    <head>
    <script>

    function CheckIt(){
    Counter=0;
    for(i=1;i<=12;i++){
    if(document.getElementById("C"+i).checked==true)Counter+=1;
    }
    if(Counter==8)alert('hm');
    }

    </script>
    </head>
    <body>

    <form name="FN">
    <input type="checkbox" id="C1" name="C" onClick="CheckIt()" value="ON">1<br>
    <input type="checkbox" id="C2" onClick="CheckIt()" value="ON">2<br>
    <input type="checkbox" id="C3" onClick="CheckIt()" value="ON">3<br>
    <input type="checkbox" id="C4" onClick="CheckIt()" value="ON">4<br>
    <input type="checkbox" id="C5" onClick="CheckIt()" value="ON">5<br>
    <input type="checkbox" id="C6" onClick="CheckIt()" value="ON">6<br>
    <input type="checkbox" id="C7" onClick="CheckIt()" value="ON">7<br>
    <input type="checkbox" id="C8" onClick="CheckIt()" vvalue="ON">8<br>
    <input type="checkbox" id="C9" onClick="CheckIt()" value="ON">9<br>
    <input type="checkbox" id="C10" onClick="CheckIt()" value="ON">10<br>
    <input type="checkbox" id="C11" onClick="CheckIt()" value="ON">11<br>
    <input type="checkbox" id="C12" onClick="CheckIt()" value="ON">12<p>
    <input type="submit" value="Submit" name="B1"><br>

    </p>

    </body>
    </html>


  •  

    Posting Permissions

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