Adding checkbox values with different input names

StackOverflow https://stackoverflow.com/questions/19563074

Pergunta

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.

Foi útil?

Solução 2

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>

Outras dicas

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top