2012-11-23 5 views
0

다른 형식의 양식 요소 값을 합산합니다. 드롭 다운하여 입력하십시오. 프로세스가 잘 진행되고 있지만 옵션을 변경 한 후에 업데이트가 자동으로 수행되지 않습니다. 내가 옵션을 선택한 후 바로 계산하는 총 가치를 필요로 http://jsfiddle.net/hWcMv/드롭 다운 및 입력으로 jQuery 계산기 자동화

: 여기

<form> 
     <label>cost: <input type="text" name="cost_1" size="5" class="summable"/></label> 
     <label>qty: <input type="text" name="cost_1_qty" size="2"/></label><br/> 

     <label>cost: <input type="text" name="cost_2" size="5" class="summable"/></label> 
     <label>qty:  <select name="cost_2_qty"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    </select></label><br/> 

     <label>cost: <input type="text" name="cost_3" size="5" class="summable"/></label> 
     <label>qty: <input type="text" name="cost_3_qty" size="2"/></label><br/> 

     <strong id="summation"></strong><br/> 
    </form> 
    <script type="text/javascript"> 

     function doTotal() { 
      var total = 0.0; 

      $(".summable").each(function (idx, element) { 
       $this = $(this); 

       var cost = parseFloat($this.val()); 
       var qty_selector = '[name=' + $this.attr('name') + '_qty' + ']'; // eg: [name=cost_3_qty] 
       var qty = parseFloat($(qty_selector).val()); 
       if (cost && qty) 
        total += cost * qty ; 
      }); 

      $("#summation").html(total.toFixed(2)); 
     } 

     $(document).ready(function() { 
      $("input[type=text]").blur(function (e) { 
       doTotal(); 
      }) 
     });   
    </script> 

라이브 버전 :

여기 내 코드입니다. 제발 제안 해주세요.

답변