2つの乗算フィールドのJquery合計

Question

複数の入力テキストフィールドの合計を計算したい*選択オプションdevise 解決策が見つかりましたが、

$('input.summable,.multiply').keyup(function() { 
    var rate = 0; 
    var box = 0; 
     rate += $('input.summable').val(); 
     box += $('.multiply').val(); 
     var sum = (rate *box); 
     $('input.summable,.multiply').each(function() { sum += parseFloat(this.value); }); 
     $('#totalsum').val(sum); 
    }); 

Answer 1

私の提案は、に基づいています：テキストフィールドの代わりに、keyUpイベントの

• 使用入力
• 文字列の前に付ける文字列を数値に変換するために+ "00"のようなプラス記号で表示されます。

私の例：

$('input.summable,.multiply').on('input change', function (e) { 
 
    var sum = 0; 
 
    $('input.summable').each(function(i, e) { 
 
    sum += (+this.value * +$('.multiply').eq(i).val()); 
 
    }); 
 
    $('#totalsum').val(sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form> 
 
    Montant: <input class="summable form-text" type="text" name="name" value size="60" maxlength="128"><br> 
 
    Device:  <select class="multiply form-select" name="money"> 
 
    <option value="5.91">BHD</option> 
 
    <option value="1.712">CAD</option> 
 
    <option value="33.245">DKK</option> 
 
</select> 
 
    <br> 
 
    Montant: <input class="summable form-text" type="text" id="edit-name" name="name" value size="60" maxlength="128"><br> 
 
    Device:  <select class="multiply form-select" name="money"> 
 
    <option value="5.91">BHD</option> 
 
    <option value="1.712">CAD</option> 
 
    <option value="33.245">DKK</option> 
 
</select> 
 
    <br> 
 
    En Dinnar: <input id="totalsum" type="text"> 
 
</form>

Answer 2

1. あなたは.multiplyでフィールド.summableを乗算したい場合は、eachループを必要といけません。
2. selectにはkeyupイベントがありません。changeイベントが必要です。

// add change event too 
 
$('.summable, .multiply').on("keyup change", function() { 
 
    var rate = parseFloat($('.summable').val()); 
 
    var box = parseFloat($('.multiply').val()); 
 
    var sum = rate * box; 
 
    
 
    // remove this 
 
    // $('.summable, .multiply').each(function() { 
 
    //  sum += parseFloat(this.value); 
 
    // }); 
 
    
 
    $('#totalsum').val(sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
sum: 
 
<input class="summable" type="text"> 
 
<br /> 
 

 
multi: 
 
<select class="multiply"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select> 
 
<br /> 
 

 
total: 
 
<input id="totalsum" type="text">