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
else 
   decrement counter
}

Open in new window

RichAsked:
Who is Participating?
 
alien109Connect With a Mentor Commented:
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.
0
 
alien109Commented:
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
            }
      }
}
</script>

<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 />
      </div>
</form>
0
 
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.
0
 
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.
0
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.

All Courses

From novice to tech pro — start learning today.