Adding checkbox values with different input names

Question

I have the following code which adds together checkboxes when they are selected and produces a total at the bottom of the page. This function uses the following code:

<script type="text/javascript">
function checkTotal() {
    document.listForm.total.value = '';
    var sum = 68.50;
    for (i=0;i<document.listForm.choice.length;i++) {
      if (document.listForm.choice[i].checked) {
        sum = sum + parseFloat(document.listForm.choice[i].value);
      }
    }
    document.listForm.total.value = sum.toFixed(2);
}

</script>

These checkboxes are within a form, and I need the form to send through to an email account. At the moment because all the checkboxes share the same input name 'choice' the PHP will only send the last checked box value.

I need to change the checkboxes input name code to name the different checkboxes 'choice1' 'choice2' 'choice3'. What would I have to change in the javascript to in order for the function to calculate all the checkboxes names 'choice1' 'choice2' 'choice3' etc rather than just adding together all checkboxes named'choice'? I have little Javascript and PHP knowledge so any help would be grateful. Thanks.

score 2 · Answer 1 · edited May 23 '17 at 10:25

2

Rather than make the checkbox names unique, it would be better to append "[]" to their name. This will cause PHP to convert the values into an array, rather than just keep the last value.

So you would want a name of choice[] rather than choice.

You can also find some sample code in this answer.

edited May 23 '17 at 10:25

Community

1
1

answered Oct 24 '13 at 10:23

Rupert Madden-Abbott

12,899
14
59
74

when i add [] to the end of 'choice' on each input name, the functionality of the form stops working it no longer adds a running total. does the javascript need to change aswell? – user2083899 Oct 24 '13 at 10:32
Yes. You should not be selecting the checkboxes by name really. Instead give them all a class, or select them based on a parent container. It is not clear to me, based on what you have posted, how you are selecting the elements current. For example, how does "document.listForm" and "document.listForm.choices" get set? – Rupert Madden-Abbott Oct 24 '13 at 13:02

score 0 · Accepted Answer · answered Oct 24 '13 at 10:41

The code below works ok (a self contained web page). The problem is how to get the array (group) of checkboxes when they're called different names. If you use jquery you could give them all the same class, then get hold of them by that class, but if you're using bare javascript then you can get the elements by Tag name ("input" in the case of the checkbox), and check each one has a name attribute that starts with "choice", inoring those that don't start with "choice", like buttons (also an input) or maybe other checkboxes with different names. It's a bit inefficient if the page is huge, unless you group the checkboxes some way.

To group them, you cold put them in a tag like

`<div id="checkboxes"> (checkboxes go here) </div>`

then use

`var cb = document.getElementById("checkboxes");`
`var arrInputs =cb.getElementsByTagName("input");`

for the line to get the arrInputs array. This would just get input type elements from within the Div. Hwever I dind't want to assume the page layout allows your checkboxes to be put in one div

Hope this helps Doug

<script type="text/javascript">
function checkTotal() {
    document.forms.listForm.total.value = '';
    var sum = 68.50;

    var frm=document.forms.listForm; // wasnt sure what your original listForm element was so I've put this form into a variable, frm

    frm.total.value = '';


    var arrInputs =document.getElementsByTagName("input");    // get all Input type elements on the form

    for (i=0; i < arrInputs .length;i++) {
      if (arrInputs[i].name.substr(0,6) == "choice")   { // if the name starts with "choice"
         if (arrInputs[i].checked) {
          sum = sum + parseFloat(arrInputs[i].value);
         }
      }
    }
    frm.total.value = sum.toFixed(2);
}

</script>

</head>


<body>
<form name="listForm">
<a href='javascript:checkTotal()'>check</a><br>
<input type=checkbox name="choice1" value="1"><br>
<input type=checkbox name="choice2" value="2"><br>
<input type=checkbox name="choice3" value="3"><br>
<input type=checkbox name="choice4" value="4"><br>
<input type=checkbox name="choice5" value="5"><br>
<input type=checkbox name="choice6" value="6"><br>
<br>
<input type=text name=total value=""><br>
</form>

</body>
</html>

Adding checkbox values with different input names

2 Answers2