Sum checkboxes input values

Hi folks...
I'm trying to prepare a form where users can select one or more checkboxes.
Input values of these checkboxes are different.
Does someone know how to obtain the sum of the selected checkboxes input values in another field and save it in db?

This is my form's code:

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="10" title="" class="radio" id="check00" name="lancio_cerchi1[]" type="checkbox" />
      <label for="check00" class="check_label">1° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 10 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="10" title="" class="radio" id="check10" name="lancio_cerchi2[]" type="checkbox" />
      <label for="check10" class="check_label">2° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 10 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="10" title="" class="radio" id="check20" name="lancio_cerchi3[]" type="checkbox" />
      <label for="check20" class="check_label">3° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 10 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="25" title="" class="radio" id="check30" name="lancio_cerchi4[]" type="checkbox" />
      <label for="check30" class="check_label">4° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 25 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="45" title="" class="radio" id="check40" name="lancio_cerchi5[]" type="checkbox" />
      <label for="check40" class="check_label">5° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 45 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Totale Punti</label>
    <input class="cf_inputbox" maxlength="3" size="30" title="" id="text_1" name="somma_pts_cerchi" type="text" value="" disabled="disabled"/>
</div>
  <div class="cfclear"> </div>
</div>

I'd like to obtain the sum in field "somma_pts_cerchi".
I read on the internet that the sum can be done using java but I really don't know where to start.
Hoping that someone could help me, thanks in advance!

Federico

Hi Federico,

A little fiddling around and this seems to work.

First add an extra class to each checkbox so that we can identify them class="radio count"

Then this code in the Form JavaScript box:

window.addEvent('domready', function(){
  function count(){
    var total = 0;
    $$('.count').each(function(box) {
      console.log(box);
      if ( box.checked == true ) {
        total += parseInt(box.value);
      }
    });
    $('text_1').value = total;
  };
  $$('.count').each(function() {
    this.addEvent('change', count);
  });
});

Bob

PS The checkbox names are all different *and* are array names. Usually you'd set them with the *same* array name e.g. name="lancio_cerchi[]" and set ChronoForm to handle arrays for you.

Sorry for bothering you again...
I added the extra class (class = "radio count") as follows:

<div class="form_item">
  <div class="form_element  cf_checkbox"> 
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="10" title="" class="radio count" id="check00" name="lancio_cerchi1[]" type="checkbox" />
      <label for="check00" class="check_label">1° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 10 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="10" title="" class="radio count"  id="check10" name="lancio_cerchi2[]" type="checkbox" />
      <label for="check10" class="check_label">2° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 10 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="10" title="" class="radio count" id="check20" name="lancio_cerchi3[]" type="checkbox" />
      <label for="check20" class="check_label">3° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 10 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="25" title="" class="radio count" id="check30" name="lancio_cerchi4[]" type="checkbox" />
      <label for="check30" class="check_label">4° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 25 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="45" title="" class="radio count" id="check40" name="lancio_cerchi5[]" type="checkbox" />
      <label for="check40" class="check_label">5° Lancio</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">:: 45 punti</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Totale Punti</label>
    <input class="cf_inputbox" maxlength="3" size="30" title="" id="text_1" name="somma_pts_cerchi" type="text" value="" disabled="disabled"/>
</div>
  <div class="cfclear"> </div>
</div>

</td>
<td>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Ente di Provenienza</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_2" name="nome_ente" type="text" disabled="disabled"/>
</div>
  <div class="cfclear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">N. Pettorale</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_3" name="pet" type="text"disabled="disabled"/>
</div>
  <div class="cfclear"> </div>
</div>
 
  <div class="cfclear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Nome</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Il campo è obbligatorio!" id="text_4" name="name" type="text" disabled="disabled" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Cognome</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Il campo è obbligatorio!" id="text_5" name="surname" type="text" disabled="disabled"/>
 
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Data di Nascita</label>
    <input class="cf_inputbox required validate-date-au" maxlength="10" size="10" title="Il campo è obbligatorio! Inserisci la data in formato gg/mm/aaaa!" id="text_6" name="date_of_birth" type="text" disabled="disabled"/>
  </div>
  <div class="cfclear"> </div>
</div>

</td>
</table>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Salva" name="button_23" type="submit"/>
  </div>
  <div class="cfclear"> </div>
</div>

and I pasted your code in the Form JavaScript box but I still don't get the sum of the value neither in field somma_pts_cerchi in my form nor in my db.

Do I have to set something as somma_pts_cerchi input value?

Hi Federico,

Oops, sorry, I left a debug line in the script. Please delete the line console.log(box);

Bob

Cool!!! It works!!!

It doesn't store the obtained value in field somma_pts_cerchi in db?
It appears just in the form...
Any idea?

Hi Federico,

You need to add the column to the database table if you haven't already done so.

You need to refresh the DB Connection after any changes to database column names. In the Form Editor click the DB Connection tab and set the Connection to 'No'. Click the 'Apply icon in the toolbar to save the form, open the DB Connection tab, set the Connection back to 'Yes' and re-save the form. This will refresh the copy of the table information that ChronoForms uses.

Bob

I had already created the column somma_pts_cerchi in my table and now I tried to refresh the DB Connection but it still don't save sum in this field.
It's driving me mad!

Hi Federico,

Sorry, I wasn't thinking. You have the input set to disabled so it won't submit anything. Use readonly='readonly' instead of disabled='disabled'.

Bob

Thanks now it works... You've been really helpful to me...