Total value calculation

Question

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <style>
   .trans_gc
  {
     width: 220px;
height: 26px; 
  }
  </style>
<script>
    $.noConflict();
    $(document).ready(function(){
        $(".trans_gc").each(function() {
 
            $(this).keyup(function(){
                calculateSum();
            });
        });
 
    });
 
    function calculateSum() {
 
        var sum = 0;
        $(".trans_gc").each(function() {
 
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
 
        });
        $("#trans_gc_total").html(sum);
    }
</script>

    <div class="control-group">
      <div style="float: left;">
        
        <label class="control-label" >
          FRT
        </label>
        <div class="controls" id="trans_gc_frt">
          <input type="text" class="trans_gc " name="trans_gc_frt" id="trans_gc_frt" required="required" >
        </div>
      </div>
      <div>
        <div>
          
          <label class="control-label"  style="margin-right: 20px;">
            Hamali Ch.
          </label>
          <div class="controls" >
            <input type="text" class="trans_gc" name="trans_gc_hamali" id="trans_gc" required="required" >
          </div>
        </div>
        
      </div>
      
    </div>
    
    <div class="control-group">
      <div style="float: left;">
        
        <label class="control-label" >
          Sr.Ch
        </label>
        <div class="controls">
          <input type="text" class="trans_gc" name="trans_gc_sr" id="trans_gc" required="required" >
        </div>
      </div>
      <div>
        <div>
          
          <label class="control-label"  style="margin-right: 20px;">
            AOC
          </label>
          <div class="controls" >
            <input type="text" class="trans_gc" name="trans_gc_aoc" id="trans_gc" required="required" >
          </div>
        </div>
        
      </div>
      
    </div>
    
    <div class="control-group">
      <div style="float: left;">
        
        <label class="control-label" >
          Door Cln
        </label>
        <div class="controls">
          <input type="text" class="trans_gc" name="trans_gc_doorcln" id="trans_gc" required="required">
        </div>
      </div>
      <div>
        <div>
          
          <label class="control-label"  style="margin-right: 20px;">
            Door Del
          </label>
          <div class="controls" >
            <input type="text" class="trans_gc" name="trans_gc_doordel" id="trans_gc" required="required" >
          </div>
        </div>
        
      </div>
      
    </div>
    
    <div class="control-group">
      <div style="float: left;">
        
        <label class="control-label" >
          Risk Ch
        </label>
        <div class="controls">
          <input type="text" class="trans_gc" name="trans_gc_riskch" id="trans_gc" required="required">
        </div>
      </div>
      <div>
        <div>
          
          <label class="control-label"  style="margin-right: 20px;">
            Demmurage
          </label>
          <div class="controls" >
            <input type="text" class="trans_gc" name="trans_gc_dem" id="trans_gc" required="required">
          </div>
        </div>
        
      </div>
      
    </div>
    
    <div class="control-group">
      
      <label class="control-label" >
        Total Value
      </label>
      <div class="controls" >
        <input type="text" class="span3" id="trans_gc_total" required="required">
        
      </div>
      
      <!-- /controls -->
      
    </div>

The total value is not displaying in the input field of id trans_gc_total. I want total of all input field which is having class trans_gc. Please can anyone help to me resolve this issue?

Answer 1

here is working script:

$(document).ready(function(){
    $(".trans_gc").keyup(calculateSum);
});

function calculateSum() {
    var sum = 0;
    $(".trans_gc").each(function() {
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $("#trans_gc_total").val(sum);
}

look at jsFiddle

Suggestions

>You don't have to execute each for event binding

   $(".trans_gc").each(function() {
        $(this).keyup(function(){
            calculateSum();
        });
    });

This can be simplified as: $(".trans_gc").keyup(calculateSum);

>To change input field value from jquery you need to use .val() instead .html()

Change,

$("#trans_gc_total").html(sum);

To,

$("#trans_gc_total").val(sum);