• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 444
  • Last Modified:

counting checkboxes in javascript and passing to javascript function and php action

I am building a form that lets the user check off a matrix of checkboxes, each which to indicate a location/category seleciton. I then want to pass the checked ones (location/category) to a javascript function to list and call PayPal, and then to a php script for subsequent entry into a database. The checkboxes arrays are created dynamically with php, as indicated in the sample code. Each has an onclick event that calls a funciton which increments a global counter if a box is checked, and decrements it if it is unchecked.

The questions are: 1) I am a bit confused on the syntax for calling the increment/decrement function - the array part is messing me up. 2) Once the user has checked all the boxes they want, I submit the form and call a javascript action where I need to get the various values of the checked checkboxes and fill in PayPal parameters and then some php code to fill in a database table with the purchased location/category. The AA, BB and CC indicate the name of a location in my database and the value 1, 2 and 3 indicates a id of a category record in the same database. These have to be sent to PayPal and then stored in the database.
... variou php code...
<input type=checkbox name=locA[] value=1 onclick=recalcTotal(this)>
<input type=checkbox name=locB[] value=1 onclick=recalcTotal(this)>
<input type=checkbox name=locC[] value=1 onclick=recalcTotal(this)>
<input type=checkbox name=locA[] value=2 onclick=recalcTotal(this)>
<input type=checkbox name=locB[] value=2 onclick=recalcTotal(this)>
<input type=checkbox name=locC[] value=2 onclick=recalcTotal(this)>
<input type=checkbox name=locA[] value=3 onclick=recalcTotal(this)>
<input type=checkbox name=locB[] value=3 onclick=recalcTotal(this)>
<input type=checkbox name=locC[] value=3 onclick=recalcTotal(this)>
<input type=checkbox name=locA[] value=n onclick=recalcTotal(this)>
<input type=checkbox name=locB[] value=n onclick=recalcTotal(this)>
<input type=checkbox name=locC[] value=n onclick=recalcTotal(this)>
more php code
javascript function recalctotal(obj) {
if obj.value=checked
   increment counter
   decrement counter

Open in new window

  • 2
  • 2
1 Solution
First suggestion - don't worry about tracking the clicks when a user selects the checkboxes. That will require to continually run the recalctotal function with logic to add/remove from what ever variable you were using to store the state.

Instead - just run the function on form submit.

If you enclose all of your checkbox elements in say a div tag, with an ID, you can easily access all of the checkboxes. Then when the form gets submitted, you run a function to calculate the total or whatever ever it is you need to do. See the snippets of HTML and JavaScript below (untested and for example only)

<script type="text/javascript">
function recalctotal() {
      var checksDiv = document.getElementById("checks");
      var checkList = checksDiv .getElementsByTagName("input");
      for(var i = 0; i < checkList.length; i++)
            if(checkList[i].checked) {
                  // add to tally or whatever you need to do

<form ... onsubmit="recalctotal();">
      <div id="checks">
            <input type=checkbox name=locA[] value=3 />
            <input type=checkbox name=locB[] value=3 />
            <input type=checkbox name=locC[] value=3 />
RichAuthor Commented:
Well, as far as the first part, I need to keep a form field called TotalCost updated as each button is checked or unchecked. I add or subtract from TotalCost.value based on the checked == true or false of the button being checked.

The second part should work for what I am doing, however, and I will try that.
OK, I think I understand why - I'm assuming it's to provide the user with live feedback of the totals.. Makes sense.

You can still use the script above, and call it on checkbox change.
RichAuthor Commented:
Thank you, that did the trick. So instead of passing only one value, I am passing the outer div element and waking through each checkbox.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now