自動jQuery計算プラグインを使用してフォームフィールドの値を計算する

Question

私は、ユーザーがjQuery/javascriptを使用して理想的に入力した値を自動的に計算するフォームを作成していますが、これはどうすればよいかわかりませんが、 （私は専門家ではありませんので、私を修正してください） - 私は何をしようとしているのかを説明するのに役立つダミー画像を作成しました。

http://i.stack.imgur.com/WScNO.png

Iは多くの入力フィールドを有する単一形態は、自動的に各テーブルの合計量は、それが選択された提供計算有します。 jQueryを使用すると、私はそのロジックが次のようになることを期待しています： i）入力フィールド要素 を見つけるii）テーブル内の値が のテーブル内のすべてのテキストフィールドを見つけるiii）これらをまとめて 'total'フォームフィールド

私はPHPで大丈夫ですが、JavaScriptは時にはまだ混乱しています。これを行う上で助けていただければ幸いです。事前

Answer 1

で

おかげで、これを試してみてください：返信用http://jsfiddle.net/Ajkkb/26/

<div> 
    <input name="r" class="rate" type="text" maxlength="255" size="5" value=""/> 
    <input name="p" class="pack" type="text" maxlength="255" size="5" value=""/> 
    <input name="b" class="bag" type="text" maxlength="255" size="5" value=""/> 
    <input name="w" class="weight" type="text" maxlength="255" size="5" value=""/> 
    <span class="amount"></span> 
</div> 
<div> 
    <input name="r" class="rate" type="text" maxlength="255" size="5" value=""/> 
    <input name="p" class="pack" type="text" maxlength="255" size="5" value=""/> 
    <input name="b" class="bag" type="text" maxlength="255" size="5" value=""/> 
    <input name="w" class="weight" type="text" maxlength="255" size="5" value=""/> 
    <span class="amount"></span> 
</div> 
<div> 
    <input name="r" class="rate" type="text" maxlength="255" size="5" value=""/> 
    <input name="p" class="pack" type="text" maxlength="255" size="5" value=""/> 
    <input name="b" class="bag" type="text" maxlength="255" size="5" value=""/> 
    <input name="w" class="weight" type="text" maxlength="255" size="5" value=""/> 
    <span class="amount"></span> 
</div> 
<div class="total_amount">total</div> 



$(document).ready(function() { 
    $('input[name=r],input[name=p]').change(function(e) { 
     var total = 0; 
     var $row = $(this).parent(); 
     var rate = $row.find('input[name=r]').val(); 
     var pack = $row.find('input[name=p]').val(); 
     total = parseFloat(rate * pack)*100; 
     //update the row total 
     $row.find('.amount').text(total); 

     var total_amount = 0; 
     $('.amount').each(function() { 
      //Get the value 
      var am= $(this).text(); 
      console.log(am); 
      //if it's a number add it to the total 
      if (IsNumeric(am)) { 
       total_amount += parseFloat(am, 10); 
      } 
     }); 
     $('.total_amount').text(total_amount); 
    }); 
}); 

//isNumeric function Stolen from: 
//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric 

function IsNumeric(input) { 
    return (input - 0) == input && input.length > 0; 
}