SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Counting number of ticked checkboxes

    I have a form as below, I want to dynamically update the value of the text field "totalcost" depending on the number of checkboxes ticked by the user.

    1 checkbox ==> totalcost = 48
    2 checkboxes ==> totalcost = 79
    3 checkboxes ==> totalcost = 115

    Note there is a forth checkbox to indicate the acceptance of the terms and conditions, I don't want the checking of this checkbox to influence the count.

    Code:
    <form name="form1" id="form1" action="payment.asp" method="POST">
    <input name="checkbox1" type="checkbox" id="checkbox1" value="Item 1" />
    <input name="checkbox2" type="checkbox" id="checkbox2" value="Item 2" />
    <input name="checkbox3" type="checkbox" id="checkbox3" value="Item 3" />
    
    <input type="text" name="totalcost" value="" />
    
    <input name="terms" type="checkbox" id="terms" value="accept" />
    
    <input type="submit" name="Submit" value="Submit" />
    </form>
    Any ideas?
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Create an empty array.
    Use document.getElementsByTagName('input') and loop through them, adding the ones which do not have the ID "terms" and which are of type "checkbox" to the array. Also attach "onclick" events to them, which call an update function.

    In your update function, loop through the array you created earlier and count how many of them are currently checked. Then once the loop is over, update the cost based on what the count is.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but I don't have problems with the algorithm or method, I have problems with syntax, my JavaScript skills are limited to the copy/paste variety. Not that I expect you to write the script for me, just wondering if anyone knows a script out there which is close enough that I can modify.
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  4. #4
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this right?

    Code:
    function setValue(){ 
    var total = 0;
    	objs = document.form1.getElementsByTagName('input');
            for(i = 0; i<objs.length; i++){
    		if(objs[i].type == 'checkbox' && objs[i].name != 'conditions'){
    			if(objs[i].type == 'checkbox'){
                     total +=1 ;
    		}
    }
    if(total == 1){
    document.form1.totalcost.value = '48';
    }
    
    if(total == 2){
    document.form1.totalcost.value = '79';
    }
    if(total == 3){
    document.form1.totalcost.value = '115';
    }
    
    
    }
    And I set the attribute onclick="javascript:setValue()" on each of the checkboxes.

    Well I get an error "Object Expected". Whenever I click a checkbox
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code Javascript:
    window.onload = function() {
      var checks = document.getElementById('form1').getElementsByTagName('input'), items = [], totalcost = document.getElementById('totalcost');
      for (var i = 0; i < checks.length; i++) {
        if (checks[i].type != 'checkbox' || checks[i].id == 'terms') continue;
        items.push(checks[i]);
        checks[i].onclick = function() {
          var total = 0;
          for (var k = 0; k < items.length; k++) {
            if (items[k].checked) total++;
          }
          if (total == 0) totalcost.value = '48';
          else if (total == 1) totalcost.value = '48';
          else if (total == 2) totalcost.value = '79';
          else if (total == 3) totalcost.value = '115';
        }
      }
    }
    No need to add "onclick" anywhere. You do need to add the ID "totalcost" to the totalcost text input.

  6. #6
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thanks works brilliantly.
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com


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
  •