Web Analytics Made Easy -
StatCounter count checkboxes - help! - CodingForum

Announcement

Collapse
No announcement yet.

count checkboxes - help!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • count checkboxes - help!

    i'm sure this should be fairly easy, but I cannot get it to work!!
    I need to count the number of checkboxes which are ticked... my form is as follows

    Code:
    <form id="myform" name="export_form_data">
    <input type="checkbox" name="processes[]" id="process_1">Process 1
    <input type="checkbox" name="processes[]" id="process_2">Process 2
    <input type="checkbox" name="processes[]" id="process_3">Process 3
    </form>
    I have tried doing

    document.export_form_data.processes.length
    and
    $("myform").processes.length

    (using prototype the above eg)

    neither of which are working!
    I tried putting the square brackets in and that didnt work either!!

    how do I count the ticked boxes?!
    thanks for any help

    Edit:
    I have got it working using the following

    Code:
    i = 0;
    		for (x=0;x<document.export_form_data.elements.length;x++) {
    			var form_element = document.export_form_data.elements[x];
    			//check the years one first
    			if (form_element.name == "processes[]") {
    				if (form_element.checked == true) {
    					//we have one ticked, so add it to the count
    					i++;
    				}
    			}
    		}
    but is there a better more efficient way?!

    Last edited by homerUK; Oct 4, 2006, 07:20 AM.
    www.mattfacer.com

  • #2
    Object type: nodeList

    When you specify the same name for multiple form elements, you can refrence them as a nodeList.

    A nodeList is similar to an array in that they both have a length attribute, and their elements are ordered.

    However, to access a nodeList's elements you must use the item(index) function.

    Before we get started we'll need to remove the square braces "[ ]" from the names attributes of your check boxes.

    Code:
    <form id="myform" name="export_form_data">
    	<input type="checkbox" name="processes" id="process_1">Process 1<br>
    	<input type="checkbox" name="processes" id="process_2">Process 2<br>
    	<input type="checkbox" name="processes" id="process_3">Process 3<br>
    	<input type="checkbox" name="processes" id="process_4">Process 4<br>
    	<input type="submit" value="Use W3C standard approach" onclick="alert('Number of checked boxes: '+countBoxes());">
    	<button onclick="alert('Number of checked boxes: '+warnCountBoxes())">Generates warnings in FF's JS Console.</button>
    </form>
    <script type="text/javascript">
    	function countBoxes(){
    		var c = 0;
    		var i = 1;
    		while((p = document.getElementById('process_'+i++))!=null)
    			if(p.checked)c++;
    		return c;
    	}
    	// Causes Warnings in NS browsers.
    	function warnCountBoxes(){
    		var c = 0;
    		p = export_form_data.processes;	//Cache value so we don't have to cause additional refrences in the loop (multiple dots eg: ex_fr_dat.proc.item(i) )
    		for(var i=p.length-1;i>-1;i--){	//Counting backwards is faster and doesn't require multiple lookups into p.length or a separate variable to test against.
    			if(p.item(i).checked)c++;	// Note: unroll the loop to make it even more efficient.
    		}
    		return c;
    	}
    	document.write("Number of checkboxes: "+export_form_data.processes.length+"<br>"); //also causes warning.
    </script>
    However, only radio buttons should have the same name attributes because CGI does not guarantee the order of the named form elements in the query string. For this reason I have included another function that makes use of the getElementById function.

    Comment

    Working...
    X