jqueryを使用して値を加算して掛ける

Question

2つの商品があり、数量を乗算して価格と税金を合計し、加算された値と乗算された値の最終的な値を表示したいと思っていました。そして両方の値がいずれかがここで

を私を助けることができるまで追加すると、そのためのコードである：ここで

$(document).ready(function(){ 
 
\t $('#sticker01').on('keyup', function() { 
 
\t \t var sticker_01 = $('#sticker01').val(); 
 
\t \t var oldval = parseInt($('#order_total').text()); 
 
\t \t 
 
\t \t var total_val = (sticker_01 * 8 +1.30) + oldval; 
 
\t \t $('#order_total').html(total_val); 
 
\t }); 
 
}); 
 

 
$(document).ready(function(){ 
 
\t $('#sticker02').on('keyup', function() { 
 
\t \t var sticker_02 = $('#sticker02').val(); 
 
\t \t var oldval = parseInt($('#order_total').text()); 
 
\t \t 
 
\t \t var total_val = (sticker_02 * 2 + 1.30) + oldval; 
 
\t \t $('#order_total').html(total_val); 
 
\t }); 
 
});

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

 
<div class="form-group"> 
 
    <label>MadEnoughToPayAttention Bumper Sticker</label> 
 
    <input type="number" name="bumper_sticker_01_qty" id="sticker01"> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label>ChangeNotHope Bumper Sticker</label> 
 
    <input type="number" name="bumper_sticker_02_qty" id="sticker02"> 
 
</div> 
 

 
<div class="order_total"> 
 
    <span>Order Total : $<div id="order_total">0.00</div></span> 
 
</div>

Answer 1

はへの軽微な変更で、あなたの問題にはあまり詳細なソリューションですHTMLと完全なオーバーホールのJavascriptです。

HTML：

Iはmin属性を追加し、両方sticker01とsticker02要素に負の値を選択することから入力スピナーを防止するにその値を設定します。 order_total入力をdisabledに設定します。これは、インラインJavaScriptのからその値を取得する計算フィールドです。これらの汚れは化粧品であり、あなたのアプリの構造性能には影響しません。

<div class="form-group"> 
    <label>MadEnoughToPayAttention Bumper Sticker</label> 
    <input type="number" name="bumper_sticker_01_qty" min="0" id="sticker01"> 
</div> 

<div class="form-group"> 
    <label>ChangeNotHope Bumper Sticker</label> 
    <input type="number" name="bumper_sticker_02_qty" min="0" id="sticker02"> 
</div> 

<div class="order_total"> 
    <span>Order Total : $ 
    <input type="text" name="bumper_sticker_total" id="order_total" disabled> 
    </span> 
</div> 

Javascriptを：

ここでは、イベント.keyup()と.change()を処理し、入力要素に委任されたイベントを使用する無名関数を実装することができます。

$('input').on('change keyup', function() { 
    sticker_01 = $('#sticker01').val(), 
    sticker_02 = $('#sticker02').val(), 
    total_val = $('#order_total'); 

    if ((sticker_01) > 0 && (sticker_02) == 0) { 
    total_val.val(((sticker_01) * 8 + 1.30).toFixed(2)); 
    } else if ((sticker_02) > 0 && (sticker_01) == 0) { 
    total_val.val(((sticker_02) * 2 + 1.30).toFixed(2)); 
    } else if ((sticker_01) > 0 && (sticker_02) > 0) { 
    total_val.val(((((sticker_01) * 8 + 1.30) + ((sticker_02) * 2 + 1.30)).toFixed(2))); 
    } else { 
    total_val.val(''); 
    }; 
}); 

これはすべて必要なものです。ここにはサンプルコードスニペットがあります。

$('input').on('change keyup', function() { 
 
    sticker_01 = $('#sticker01').val(), 
 
    sticker_02 = $('#sticker02').val(), 
 
    total_val = $('#order_total'); 
 

 
    if ((sticker_01) > 0 && (sticker_02) == 0) { 
 
    total_val.val(((sticker_01) * 8 + 1.30).toFixed(2)); 
 
    } else if ((sticker_02) > 0 && (sticker_01) == 0) { 
 
    total_val.val(((sticker_02) * 2 + 1.30).toFixed(2)); 
 
    } else if ((sticker_01) > 0 && (sticker_02) > 0) { 
 
    total_val.val(((((sticker_01) * 8 + 1.30) + ((sticker_02) * 2 + 1.30)).toFixed(2))); 
 
    } else { 
 
    total_val.val(''); 
 
    }; 
 
});

<div class="form-group"> 
 
    <label>MadEnoughToPayAttention Bumper Sticker</label> 
 
    <input type="number" name="bumper_sticker_01_qty" min="0" id="sticker01"> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label>ChangeNotHope Bumper Sticker</label> 
 
    <input type="number" name="bumper_sticker_02_qty" min="0" id="sticker02"> 
 
</div> 
 

 
<div class="order_total"> 
 
    <span>Order Total : $ 
 
    <input type="text" name="bumper_sticker_total" id="order_total" disabled> 
 
    </span> 
 
</div> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>