How can sum an array of input values?

Question

I'm trying to use an array of input values to do a live sum of the values.

Here is the example:

SUM  <input id="proyected_analysis_expense_1" name="proyected_analysis_expense[name][]" type="text" value="">    

<script type="text/javascript">

  jQuery("#proyected_category_expense_1").live("change", function(){
    pce1_value = parseFloat(jQuery("#proyected_category_expense_1").val());
    total = pce1_value ;

    jQuery("#proyected_analysis_expense_1").val(total.toFixed(2));  
   });    
 </script>  

  FIELD1: <input id="proyected_category_expense_1" name="flow_budget[flow_budget_details_attributes][1][amount]" type="text" value=""></td></tr>

Here is the live demo

enter image description here

The problem is that the sum is not working on the demo

I want this using dynamic information

<script type="text/javascript">

  jQuery("#proyected_category_expense_1").live("change", function(){
    pce1_value = parseFloat(jQuery("#proyected_category_expense_1").val());
    pce2_value = parseFloat(jQuery("#proyected_category_expense_2").val());
    pce3_value = parseFloat(jQuery("#proyected_category_expense_3").val());
    .... ///this will continue without type
    total = pce1_value +  pce2_value +   .... ;   ///this will continue without type

    jQuery("#proyected_analysis_expense_1").val(total.toFixed(2));  
    jQuery("#proyected_analysis_expense_2").val(total.toFixed(2));  
    .... ///this will continue without type

   });    
 </script>

Please somebody can help me how to do the sum in input arrays?

Arun P Johny · Accepted Answer · 2014-11-11 05:09:40Z

The problem is you are assigning the value of the current input element to the total instead of summing it.

So instead of adding multiple change handlers, use a single change handler then add all the target input element values like

jQuery(".group input[id^='proyected_category_expense_']").live("change", function() {
  var totalval = 0.00;

  var $group = jQuery(this).closest('.group');
  $group.find("input[id^='proyected_category_expense_']").each(function() {
    totalval += (+this.value || 0)
  });

  $group.find('input[name="proyected_analysis_expense[name][]"]').val(totalval.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="columns_1 group">
  <p>
    <label><span style="color:red">(*) </span>TOTAL SUM 1</label>
    <input id="proyected_analysis_expense_1" name="proyected_analysis_expense[name][]" type="text" value="">
    <a onclick="document.getElementById('div_1').style.display='';return false;">
      <img src="/images/standard/add.png" height="15" width="15">
    </a>
    <a onclick="document.getElementById('div_1').style.display='none';return false;">
      <img src="/images/standard/delete.png" height="15" width="15">
    </a>

  </p>
  <div id="div_1" style="margin: 15px 15px 0px; padding: 5px; border: 1px solid rgb(170, 170, 170);">
    <table>
      <tbody>
        <tr>
          <td><span style="color:red">(*) </span>FIELD1:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][1][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][1][category_expense_id]" type="hidden" value="1">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][1][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_1" name="flow_budget[flow_budget_details_attributes][1][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD2:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][2][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][2][category_expense_id]" type="hidden" value="2">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][2][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_2" name="flow_budget[flow_budget_details_attributes][2][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD3:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][3][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][3][category_expense_id]" type="hidden" value="3">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][3][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_3" name="flow_budget[flow_budget_details_attributes][3][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD4:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][4][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][4][category_expense_id]" type="hidden" value="4">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][4][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_4" name="flow_budget[flow_budget_details_attributes][4][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD5:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][5][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][5][category_expense_id]" type="hidden" value="5">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][5][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_5" name="flow_budget[flow_budget_details_attributes][5][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD6:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][6][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][6][category_expense_id]" type="hidden" value="6">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][6][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_6" name="flow_budget[flow_budget_details_attributes][6][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD7:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][7][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][7][category_expense_id]" type="hidden" value="7">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][7][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_7" name="flow_budget[flow_budget_details_attributes][7][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD8:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][8][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][8][category_expense_id]" type="hidden" value="8">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][8][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_8" name="flow_budget[flow_budget_details_attributes][8][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD9:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][9][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][9][category_expense_id]" type="hidden" value="9">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][9][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_9" name="flow_budget[flow_budget_details_attributes][9][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD10:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][30][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][30][category_expense_id]" type="hidden" value="30">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][30][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_30" name="flow_budget[flow_budget_details_attributes][30][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <p></p>
</div>
<div class="columns_1 group">
  <p>
    <label><span style="color:red">(*) </span>TOTAL SUM 2</label>
    <input id="proyected_analysis_expense_2" name="proyected_analysis_expense[name][]" type="text" value="">
    <a onclick="document.getElementById('div_1').style.display='';return false;">
      <img src="/images/standard/add.png" height="15" width="15">
    </a>
    <a onclick="document.getElementById('div_1').style.display='none';return false;">
      <img src="/images/standard/delete.png" height="15" width="15">
    </a>

  </p>
  <div id="div_1" style="margin: 15px 15px 0px; padding: 5px; border: 1px solid rgb(170, 170, 170);">
    <table>
      <tbody>
        <tr>
          <td><span style="color:red">(*) </span>FIELD01:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][11][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][11][category_expense_id]" type="hidden" value="1">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][11][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_11" name="flow_budget[flow_budget_details_attributes][11][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIEL0D2:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][12][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][12][category_expense_id]" type="hidden" value="2">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][12][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_12" name="flow_budget[flow_budget_details_attributes][12][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <p></p>
</div>

Can you check this example please that's what i want? jsfiddle.net/sp47rv1t/16
@ThanatosSama see the update... a new class group is added to the top level div.columns_1 elements
Thanks seems to be working but i have a last help please how do you sum all total_sums_1 + total_sum_2 + .... that's the last help please.

Bharat Ranpariya · Accepted Answer · 2014-11-11 11:57:41Z

2

You no need to change more in your code, just remove on change method form your text box . and put one common on change event as just i putted in demo. loop through each text box and sum of all value. I had tried to make code as simple as you understand .

jQuery(".group input[id^='proyected_category_expense_']").live("change", function() {
var totalval = 0.00;

   var $group = jQuery(this).closest('.group');
   $group.find("input[id^='proyected_category_expense_']").each(function() {
       totalval += (+this.value || 0)
   });

   $group.find('input[name="proyected_analysis_expense[name][]"]').val(totalval.toFixed(2));

   var finalsum = 0.00;    
    jQuery('input[name="proyected_analysis_expense[name][]"]').each(function(){
       finalsum += parseFloat(jQuery(this).val() || 0);
     });
  jQuery(".finalsum").html(finalsum);
});

Demo: http://jsfiddle.net/patelbharat001/sp47rv1t/24/

edited Nov 11, 2014 at 11:57

answered Nov 11, 2014 at 4:45

Bharat Ranpariya

1,27314 silver badges23 bronze badges

1 Comment

Bharat Ranpariya Over a year ago

@ThanatosSama check my updated answer. i added one extra div for showing total sum having class='finalsum', check it in answer.

Collectives™ on Stack Overflow

How can sum an array of input values?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related