SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Aug 7, 2007, 04:12 #1
- 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>
-
Aug 7, 2007, 04:39 #2
- 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.Last edited by Raffles; Aug 7, 2007 at 05:57.
-
Aug 7, 2007, 04:49 #3
- 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.
-
Aug 7, 2007, 05:01 #4
- 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'; } }
Well I get an error "Object Expected". Whenever I click a checkbox
-
Aug 7, 2007, 06:10 #5
- 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'; } } }
-
Aug 7, 2007, 06:50 #6
- Join Date
- Oct 2003
- Location
- Tenerife, Spain / UK
- Posts
- 329
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wow thanks works brilliantly.
Bookmarks